CODEWITHSUNDEEP
htmlcssposition
Maximus S
Maximus S

Reputation: 11125

Positioning Elements: Div on top of another div

Live page: Link

I have a top nav bar that has a fixed position, and oblique color. This nav bar should be placed on top of all the posts as you scroll down. However, when you check the live page at the link above, the pictures are placed on top of the top nav bar, not the other way around.

On the other hand, this view is working as I'd like it to be.

Could someone tell me how to solve this problem?

Upvotes: 0

Views: 104

Answers (3)

AdityaSaxena
AdityaSaxena

Reputation: 2157

As a general rule, if you have the following html.

<tag1>
</tag1>
<tag2>
</tag2>

tag2 will always be layered above tag1 if they were positioned. That is what is happening in your case. So what I'd suggest just like @Sowmya above is use z-index but on a different tag.

.fixed_pos{
z-index: 1; /*any z-index would do here*/
}

Upvotes: 0

Dineshkani
Dineshkani

Reputation: 3015

Change your css class like this

.fixed_pos {
left: 0;
position: fixed;
right: 0;
z-index: 1000;
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

Add z-index:1 to .nav

.nav {
background-color: black;
padding-bottom: 2px;
z-index: 1;
}

Upvotes: 1

Related Questions