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中的更改。

结果将是这样的（我将照片更新为随机图片，以便您可以看到效果）：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

绝对定位的div图像重叠

1 个答案: