CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3403337
user3403337

Reputation: 55

Z-index and transition css property conflict?

In my page, I have 3 placeholder images under my portfolio section. What I want is for the images to get wider and taller when they are hovered. However, I also have a fixed header set with a z-index of 1000 (for obvious reasons). The issue is that for some reason, even though I have set my containers to position: relative with a z-index of -1, the images still appear over my header when I scroll down. Here is my codepen snippet:

https://codepen.io/PatrickVegas/full/RVapzR/

 * { font-family: 'Raleway', sans-serif; }* HEADER/HOME ---------------------------------*/

What can I do? Thanks!

Upvotes: 0

Views: 315

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

Add the position: relative; and z-index: 9999; to your css class container-header will fix the problem you have with those images.

.container-header {
  position: relative;
  z-index: 9999;
  ...

 }

https://codepen.io/hdl881127/pen/eWzzBp

Most of the time when you can't position something, try to move up to the parent and see what's in there. In your case here <div class="portfolio" id="portfolio"> are sibling with your nav menu <div class="container-header" id="home">, you can't position them if you only add index to their child element.

take a look at this img, it provide tons of information about position:

enter image description here

I know there are lots of answer in stack-overflow but this link helped me alot when I think about this.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Upvotes: 2

Related Questions