Here is the issue I'm facing:
f http://d.pr/i/Kge6+
I have three images positioned absolutely within a box that is fixed in position. I want the images to not overlay on top of each other, but despite trying various solutions (changing z-index, removing them..)
Nothing seems to work.
<section class="home">
<container>
<div class="center-homepage">
<img src="img/home-mascot.svg" alt="" class="mascot">
<img src="img/home-scribble.svg" alt="" class="scribble">
<img src="img/home-circles.svg" alt="" class="circles">
</div>
</container>
</section>
<section class="content">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, quisquam, excepturi, debitis, accusamus harum consequatur expedita consequuntur pariatur quae autem unde molestiae laboriosam repudiandae iste illum quasi possimus placeat reiciendis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, et, totam, magni, fugiat nesciunt qui quas tempore atque consequuntur ad neque eum ex modi beatae error necessitatibus officia fuga odio.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, voluptatibus, itaque sed saepe exercitationem atque voluptas! Similique, temporibus, fugit, tempora, voluptate culpa asperiores eligendi quibusdam explicabo repellendus esse quasi earum?</p>
</div>
</section>
.home {
height: 576px;
width: 100%;
position: relative;
background: url(' (a lot of data URI) ') no-repeat center 32px, #8b737a;
background-attachment: fixed; }
.center-homepage {
width: 500px;
margin-left: -250px;
height: 400px;
top: 90px;
position: fixed;
left: 50%;
z-index: 1; }
And the css:
.mascot, .circles, .scribble {
position: absolute; }
.mascot {
width: 190px;
left: 50%;
margin-left: -95px;
top: 60px;
z-index: 5; }
.circles {
width: 230px;
left: 50%;
margin-left: -123px;
top: 20px;
z-index: 0; }
.scribble {
width: 400px;
top: 160px;
left: 50%;
margin-left: -200px;
z-index: 3; }
.content {
z-index: 100;
position: relative; }
Check out the live website here
I'm still trying to understand the concept of "stacking order context". As far as I know, if the parent has a higher z-index, it should take precedence over its children, but it doesn't seem to be the case here.