Question

提前感谢您的帮助......

作为学习HTML和CSS的一部分，我正在开发一个响应式长滚动页面，其中包含少量大图像，分解了几个不同的部分。最后，我想将这些大图像切换到CSS中的背景图像，但为了这个问题，我将它们内联。

我正在尝试使用z-index然后在主要大图像（bg1）之上堆叠一些其他链接图像。为了创建非常基本的布局，我创建了一个包含大图像（bg1和bg2）的2 li的ul，然后在其中一个父li中创建了第二个ul。虽然我确定我搞砸了一些术语，但这在我的脑海中是有道理的。

长话短说，我有3个社交媒体图标，我想连续显示这个子ul的一部分。问题是虽然我可以让它们堆叠在主图像（bg1）之上，但它们也堆叠在一起，这意味着你只能实际看到一个社交媒体图标。我会想到显示：我的CSS中的inline-block会解决这个问题吗？如果我将.social-media上的位置切换为相对位置，它将正确排列，但它不再位于我的主图像（bg1）之上。

另一方面，我最终希望将背景图像放入CSS中。如果我把它作为一个静态页面，它工作正常，但有一些基于jquery的响应，我无法正常工作以调整这些图像......我将解决下一个但是现在，我'我试图了解如何解决现在发生的事情。

再次感谢！

我的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>

我的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;
}

Answer 1

您的CSS定位错误。您需要提供.social-media position: absolute;，而不是li项。

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

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

Working Example

Answer 2

试试这个

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

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

为什么我的z索引列表项堆叠在一起？

2 个答案: