CODEWITHSUNDEEP
htmlcss
Nitish Kumar
Nitish Kumar

Reputation: 6286

How to overlap two div with css

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.

Upvotes: 0

Views: 922

Answers (1)

rittam
rittam

Reputation: 318

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.

Upvotes: 1

Related Questions