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 do I modify the Datatable header style in PF Dynamic Columns?

    How to make an element match the height of a dynamic page

    How to create a dynamically sized form background with CSS?

    How to position a background image without background-position property

    How to make a radio button look like a toggle button

    How to turn off carousel when resized?

    How to move this circle using javascript?

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to design a Sass animation library that allows users to modify variables?

    How do you make linked text act as if it is normal text?

    How to use a different stylesheet for iphone or android?

    How to set a fixed background with CSS?

    How to design a cross client / browser compatible email?

    how to connect circles with lines without ovelaping

    How to override font-size (em) in this condition?

    How to make the margins and border in a mobile website invisible html/css

    css: how to display prev and next links outside slider

    How to specify image paths in CSS files?

    How to create a simple social sharing dropdown menu in CSS/HTML

    How to dynamically set and modify CSS in JavaScript?

    How to use absolute positioning without overlap effect

    How to set border radius of some corner only with CSS

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How to apply css just to element that curser is on?

    How to set a menu hover delay

    CSS: position: absolute together with margin: auto for centering - How does that work?

    How to replicate {cursor: hand; cursor: pointer} in jQuery

    CSS and jQuery current links navigation: how to update the
  • class
  • How do I style a circular vertically-loading progress bar?

    Markup/Style best practices: How to efficiently distribute style rules over CSS classes?