使相對定位的元素不影響布局/高度

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

Answer 3

為什么不用負保證金來修復呢？

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