CODEWITHSUNDEEP
csstwitter-bootstrap
katie hudson
katie hudson

Reputation: 2893

z-index on Bootstrap elements

I am faced with a situation where I am struggling to find a solution. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place.

I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. This JSFiddle demonstrates my problem.

So I have found a way to overcome this. I essentially gave each section a relative position and then set a z-index.

#sectionTwo {
  position: relative;
  z-index: -1000;
}
#sectionThree {
  position: relative;
  z-index:1000;
  background: #ccc;
}

This seemed to fix the problem, but one thing I do not like is that when I try to inspect element, it seems to always focus on the body element rather than the section I select.

Anyways, with that fix in place, I was faced with another problem. The section also needed a box at the top, that would overlap into the section above it. I made a quick sketch to demonstrate what I am after

Layout

I have noticed however that setting the z-index is now causing me problems. I can't get the box to overlap section one.

Here is my latest JSFiddle which demonstrates where I am at.

So really I am after advice on whether I am handling the z-index correctly, and how I can get the box overlapping section one.

Thanks

Upvotes: 0

Views: 7073

Answers (2)

vicbyte
vicbyte

Reputation: 3790

Going into positive zindex values seem to fix your problems:

#sectionOne {
  position: relative;
  z-index: 10;
}
#sectionTwo {
  position: relative;
  z-index: 20;
}
#sectionThree {
  position: relative;
  z-index: 30;
}

Upvotes: 1

Laura
Laura

Reputation: 278

Is this what you are after? If you are wanting the elements in section 2 to be on top of section 1, you will need to give section 2 a higher 7 index than section 1.

#sectionOne {
background: #ccc;
z-index: 2;
}
#sectionTwo {
position: relative;
z-index: 3;
}
#sectionThree {
position: relative;
z-index:1;
background: #ccc;
}

Upvotes: 1

Related Questions