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，但这是来自同一文档的技巧

...
相对定位的框为绝对定位的后代建立新的containing block。（这是相对定位的盒子的常见用法。）关于包含块的部分解释了相对定位的盒子何时建立新的包含块。

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

＆＃13;

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>

＆＃13;

Answer 2

你应该让父亲的位置相对而实际的元素是绝对的。

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

.mydiv {
    position: relative;
}

Answer 3

为什么不使用负边距修复它？

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

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

3 个答案:

6.1。相对定位