[英]Make relatively positioned element not affect layout/height
我有一个图标,像这样:
<div class="mydiv">
<i style="position: relative; top: 3px;"></i>
</div>
我想将图标向下移动3个像素,这有效。 但是div仍然有更大的高度,因为图标在技术上扩展了线的高度。 如何使图标完全不影响布局,而不是让div更高?
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>
您应该使父级的位置相对而实际的元素绝对。
<div class="mydiv">
<i style="position: absolute; top: 3px;"></i>
</div>
.mydiv {
position: relative;
}
为什么不用负保证金来修复呢?
<div class="mydiv">
<i style="position: relative; top: 3px; margin-bottom:-3px;"></i>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.