html - 如何防止 CSS 转换影响我页面上的其他图标？

Question

预先感谢您抽出时间帮我看一下。我对制作网站有点陌生；我知道基础知识和一些高级知识。我在我的投资组合页面上工作，我正在使用图标进行导航。我将它们都放在一个 div 中，并将它们都放在相对位置，这样我就可以将它们放在 div 中。当我向图标添加 CSS 过渡以使它们在悬停时放大时，我的问题就来了，当我将鼠标悬停在它们上面时，图标将其他图标推下。我知道我可以使用绝对定位，这不会发生，但我不想这样做。有小费吗？

这是我的代码:

HTML:

    <div id="container_1">
<img class="icon" id="abouticon" src="assets/icons/abouticon.fw.png" width="80"      height="80">
<br>
<img class="icon" id="portfolioicon" src="assets/icons/portfolioicon.fw.png" width="80" height="80">
<br>
<img class="icon" id="facebookicon" src="assets/icons/facebookicon.fw.png" width="80" height="80">
<br>
<img class="icon" id="contacticon" src="assets/icons/emailicon.fw.png"  width="80" height="80">

还有我的 CSS:

        #container_1    {
    position: relative;
    width: 80%;
    height: 100%;
    margin-top: 0%;
    margin-right: 25%;
    margin-left: 10%;
    margin-bottom: 25%;
    z-index: 1;
}

.icon   {
    transition: .2s ease;
    padding: 20px 20px 20px 20px;
}

.icon:hover {
    padding: 20px 20px 20px 20px;
    height: 90px;
    width: 90px;
    transition: .3s ease;
    position: relative;
    z-index: 2;
}



#abouticon  {
    top: 50px;
    left: 0px;
    position: relative;
}

#portfolioicon  {
    top: 50px;
    left: 0px;
    position: relative;
}

#facebookicon   {
    top: 50px;
    left: 0px;
    position: relative;
}

#contacticon    {
    top: 50px;
    left: 0px;
    position: relative;
}

Answer 1

如果您要更改相对定位的 block 元素的宽度、高度、填充或边距，您基本上是在更改框的属性，这将不可避免地导致流中其他元素的重新定位。

我会改用转换:

.icon:hover {
    transform: scale(1.25, 1.25);
    -moz-transform: scale(1.25, 1.25);
    -webkit-transform: scale(1.25, 1.25);
    -o-transform: scale(1.25, 1.25);
}

这将在不影响其任何框属性的情况下将图标扩展 +25%。

请注意:为了使其按照您希望的方式工作，您必须从您的 .icon:hover 声明中删除对宽度、高度、边距或填充的所有更改。

另请注意:您无需在 :hover 声明中重新应用所需的转换。在基本状态中声明它就足够了(在你的 .icon 声明中，即)。