CODEWITHSUNDEEP
htmlcss
Michael Kenji
Michael Kenji

Reputation: 83

How make a fixed element be on top of another position fixed element

I want to make this shopping cart's div follow the user's viewport (http://testshop.michaelkenji.com/), so I tried to simply injecting div { position:fixed} to it's stylesheet, it worked, but there are complications which I am here to ask.

Q: Given two fixed elements, and they collide, which one will be on top? Q: How do I make an element be the absolute "top" (with only css)

Upvotes: 5

Views: 4989

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

When you want to overlap the element in top, you should use a higher z-index value for eg:

div{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

div{/*this div will be on top layer of previous div*/
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;/*because of higher z-index*/
}

Upvotes: 5

Related Questions