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

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. Relative positioning

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it.

基本上相对定位的元素仍然会影响周围的元素。您正在寻找 position: absolute，但这是同一文档中的一个技巧

...
A relatively positioned box establishes a new containing block for absolutely positioned descendants. (This is a common use of relatively positioned boxes.) The section on containing blocks explains when a relatively positioned box establishes a new containing block.

因此，通过将父级设置为 position: relative，您可以将它变成一个包含 block ，这意味着包含在其中的绝对定位元素将相对于父级的边缘而不是包含的根定位挡住(窗口)。

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>