使相对定位的元素不影响布局/高度

Question

我有一个图标,像这样:

<div class="mydiv">
   <i style="position: relative; top: 3px;"></i>
</div>

我想将图标向下移动3个像素,这有效.但是div仍然有更大的高度,因为图标在技术上扩展了线的高度.如何使图标完全不影响布局,而不是让div更高？

Answer 1

http://www.w3.org/TR/css3-positioning/#rel-pos

6.1.相对定位

相对定位的盒子保持其正常的流量大小,包括换行符和最初为它保留的空间.

基本上相对定位的元素仍会影响周围的元素.你正在寻找position: absolute,但这是同一文件中的一个技巧

...
相对定位的盒子为绝对定位的后代建立一个新的包含块.(这是相对定位的盒子的常见用法.)关于包含块的部分解释了相对定位的盒子何时建立新的包含块.

因此,通过将父项设置为position: relative您将其转换为包含块,这意味着包含在其中的绝对定位元素将相对于父项的边缘而不是包含块的窗口(窗口)定位.

Hello World. 
<span style="position: relative; background-color: red;">
    This will be shown inline
    <span style="position: absolute; top: 100%; left: 0px;">
        This will be below
    </span>
</span>

Answer 2

您应该使父级的位置相对而实际的元素是绝对的.

<div class="mydiv">
    <i style="position: absolute; top: 3px;"></i>
</div>

.mydiv {
    position: relative;
}