绝对定位 div 图像重叠

Question

我正在尝试为网站构建一个社交媒体栏，并使用图像作为每个网站的链接。我为每个图像设置了一个动画，为了使动画正常工作，需要将 img 位置设置为 absolute。然而，我运行遇到的问题是 div="crossfade 中的所有图像都堆叠在一起。我已经为此工作了 3 个小时，但没有合理的解决方案。我怎样才能分开各个链接。

HTML:

<div id="social-icons">
    <div id="crossfade">
         <a href="http://www.facebook.com/lostbydesignband" target="_blank">
                    <img src="images/facebookLogoHover.png" width="55" height="55" class="bottom" >
                    <img src="images/facebookLogo.png" width="55" height="55" class="top" >
         </a>
         <a href="#" target="_blank">
                    <img src="images/gmailLogoHover.png" width="55" height="55" class="bottom" >
                    <img src="images/gmailLogo.png" width="55" height="55" class="top" >
         </a>
    </div>
</div>

CSS:

#social-icons {
    background-color:#291F32;
    width:100%;
    position:fixed;
    bottom:0;
    margin:0px;
}

#crossfade {
    position:relative;
}

#crossfade img {
    position:absolute;
    margin:0px auto;
    left:0;
    right:0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#crossfade img:hover {
    opacity:0;
}

Answer 1

问题是您没有为包含图像的锚定样式。由于图像具有 position:absolute，它们将在页面流之外，它们包含的锚点的宽度和高度将为 0，并且图像将重叠。

您可以通过设置锚点样式轻松解决此问题：

添加一个 position:relative 以便图像相对于 a 而不是 #crossfade（在父对象上添加一个 text-align:center 使它们仍然居中显示）
设置一个height和一个width（与图片相同的55px）
将显示设置为 inline-bock，以便识别 height 和 width 中的更改。

结果是这样的（我把图片更新成随机的，大家看看效果）：

#social-icons {
    background-color:#291F32;
    width:100%;
    position:fixed;
    bottom:0;
    margin:0px;
}

/* modified CSS */
#crossfade {
    text-align:center;
}

#crossfade a {
    position:relative;
    display:inline-block;
    width:55px;
    height:55px;
}
/* end modified CSS */

#crossfade img {
    position:absolute;
    margin:0px auto;
    left:0;
    right:0;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#crossfade img:hover {
    opacity:0;
}

<div id="social-icons">
    <div id="crossfade">
         <a href="http://www.facebook.com/lostbydesignband" target="_blank">
             <img src="http://lorempixel.com/55/55/abstract/" width="55" height="55" class="bottom" >
             <img src="http://lorempixel.com/55/55/animals/" width="55" height="55" class="top" >
         </a>
         <a href="#" target="_blank">
             <img src="http://lorempixel.com/55/55/people/" width="55" height="55" class="bottom" >
             <img src="http://lorempixel.com/55/55/sports/" width="55" height="55" class="top" >
         </a>
    </div>
</div>

你也可以在这个 JSFiddle 上看到它：http://jsfiddle.net/w4f6o2ny/

绝对定位 div 图像重叠

absolute positioned div images overlapping

html

css

image

css-position

absolute