CODEWITHSUNDEEP
htmlcss
sforcash
sforcash

Reputation: 429

Why are my z-indexed list items stacking on top of each other?

Thanks in advance for any help...

As part of learning HTML and CSS, I'm working on a responsive long scroll page with a small handful of large images breaking up a few different sections. Ultimately, I'd like to switch those large images to background images in CSS, but for sake of this question, I've got them inline.

I'm trying to use z-index to then stack some other link images on top of the main large image (bg1). To create the very basic layout, I created a ul with 2 li containing the large images (bg1 and bg2) and then created a second ul within one of the parent li. That makes sense in my head though I'm sure I'm screwing up some terminology.

Long story short, I have 3 social media icons that I'd like displayed in a row as part of this sub-ul. The problem is although I can get them to stack on top of the main image (bg1), they also stack on top of each other which means you can only actually see one of the social media icons. I would've thought that display:inline-block in my CSS would fix that? If I switch the position on .social-media to relative, it will then line them up correctly, but it is no longer on top of my main image (bg1).

On a side note, I'd ultimately like to get the background images into the CSS. If I do it as a static page, it works fine, but there's some jquery based responsiveness that I haven't been able to get to work correctly for resizing those images... I'll tackle that next but for now, I'm trying to understand how to fix what's going on now.

Thanks again!

My HTML:

<body>

<ul id="frames" class=" ">
    <li id="landing-frame" class="landing" style="position:relative; min-height:1px; height:auto; overflow:visible">
        <img src="images/bg1.jpg"/>
    </li>
    <li>
        <ul class="social-media">
            <li><a href="https://www.facebook.com/gabby"><img src="images/facebook-pink.png" /></a></li>
            <li><a href="blog"><img src="images/blog-icon.png" /></a></li>
            <li><a href="www.facebook.com/ryan###"><img src="images/facebook-blue.png"/></a></li>
        </ul>
    </li>   
    <li id="links-frame" class="links " style="position:relative; min-height:1px; height:auto; overflow:visible">
        <img src="images/bg2.jpg"/>
    </li>

    <li id="gallery-frame" class="gallery " style="position:relative; min-height:1px; height:auto; overflow:visible">
        <h1>Gallery</h1>
    </li>


</ul>

My CSS:

html, body{
    margin: 0;
    height:100%;
    list-style-type:none;
}

.landing{
    width:100%;
    height:100%;
    background:#ffffff;
}
.landing img{
    width:100%;
    height:100%;
    z-index:999;
    vertical-align:middle;
}
.social-media li {
    display:inline-block;
    z-index:998; 
    position:absolute; 
    bottom:10%; 
    left:45%;
    text-align:center;
    float:left
}

.social-media img {
    width:50%;
    height:auto;
}

Upvotes: 0

Views: 79

Answers (2)

Casanova
Casanova

Reputation: 1

try this

.social-media {
display:block;
z-index:998; 
position:absolute; 
bottom:10%; 
left:45%;
text-align:center;
float:left
}

.social-media li {
display:inline-block;
}

Upvotes: 0

Sebsemillia
Sebsemillia

Reputation: 9476

You are targeting your CSS wrong. You need to give .social-media position: absolute;, not the li item. 

.social-media {    
  z-index:998; 
  position:absolute; 
  bottom:10%; 
  left:45%;
  text-align:center;
}

.social-media li {
    display:inline-block;
}

Working Example

Upvotes: 2

Related Questions