0

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!

user3403337
  • 55
  • 1
  • 1
  • 11
  • 1
    For me its behind the navigation. Sorry but I dont really get your problem could you explain it for me once more? – Kris J. Apr 21 '17 at 08:23
  • Working for me. If you are using Chrome, try Ctrl+Refresh to do a hard refresh of the page. – Pyromonk Apr 21 '17 at 08:25
  • It's ok for me, only that you have a weird animation on the header after scrolling down: background appear, then all disappears and appears again. – Gerard Reches Apr 21 '17 at 09:24
  • @KrisJ. i want to add a transition effect to height and width of images when they're hovered, but it's not working when they are positioned. – user3403337 Apr 21 '17 at 18:46

1 Answers1

2

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

Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • 1
    @ChrisHappy oops, I didn't save, try now. – Dalin Huang Apr 22 '17 at 00:02
  • The problem is that my hovering effects are not working when the z-index is less than that of the header's. – user3403337 Apr 22 '17 at 01:22
  • @user3403337 does this fix the problem now? https://codepen.io/hdl881127/pen/eWzzBp – Dalin Huang Apr 22 '17 at 02:16
  • @user3403337 take a look at this post I answered, play around with the code sample, might help you http://stackoverflow.com/questions/43055941/z-index-not-working-in-my-code/43056069#43056069 – Dalin Huang Apr 22 '17 at 04:07
  • @user3403337 this post http://stackoverflow.com/a/43056069/4739018, the code have two example, which shows z-index and how it works with parent/child or same level element =D. Please accept the answer if that fixed your problem, thanks! – Dalin Huang Apr 22 '17 at 04:13