How to overlap two div with css


Tags: html,css

Problem :

I'm trying to build a page where I have two sidebars both in opposite direction. I'm using a metronic admin theme purchased from evanto, I want it to be fixed even page is being scrolled and the page content to be below that sidebar. I've placed these two menu inside a div with class page-container in which I'm having another div for the page content named page-content-wrapper.

here is the link to my problem

I tried using the following css in editor.css:

body {
    color: #333333;
    font-family: "Open Sans", sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size: 13px;
    direction: ltr;
}

body {
    background: #e9ecf3;
}

.page-header-fixed {
    margin: 0px;
    padding: 20px 20px 0 20px;
    position: relative;
    z-index: 2;
}

.page-container {
    margin-top: 75px;
    padding: 0px;
    z-index: 2;
}

.page-content-wrapper {
    z-index: 3;
}

I tried using absolute position but it becomes more messy as both the sidebars collapse. I tried putting z-index too but its not helping.

Content is also coming down the sidebar.

Please help.



Solution :

if you want to fix the position of the element with respect to the window even when scrolling then use position: fixed; on that specific element.


    CSS Howto..

    How to draw error icon with css only,exactly like in the image

    Extjs: how Element's up/down functions work?

    How do I center elements on a page using percentage widths?

    How can I select an nth element without knowing the element in CSS?

    How to <%= link_to %> entire area of
  • in Ruby on Rails
  • How to position an image sprite at the bottom of an element of unknown height

    How to change the background color on a input checkbox with css? [duplicate]

    How to create an infinite easing in and out CSS animation loop?

    How to change css from javascripts

    How to change qunit theme / layout

    How to avoid setting CSS class to one table among two tables?

    How to select a great grandchild of an element by its id

    How to render a template containing CSS with }} sequence inside using Twig

    How to make content fill space inside
    tag in html?

    how to place two divs side by side

    How to make angular material dialog box work in IE10

    How to position two divs on either side of the screen, HTML, CSS

    How to get this code to behave differently based on what exactly is clicked?

    Responsive CSS - how to 'dynamically' align div to parent width with padding/margin?

    How to change color of element when hovering over another element?

    How do I return the box height to original state when clicked again in JQuery?

    How to get Sub Menu to right align using CSS

    Css When having 2 bg-image, how to have 1 to extend out of the grid

    How do I get the height of a textarea

    How to dynamically insert css vendor prefixes using jquery

    ASP.NET How to set Text to the right side of image

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    How can I create Javascript Buttons with Themes?

    How to prevent links from wrapping in CSS megamenu div (inheritance issue)

    How to know where to use css, less and Sass? [closed]