了解绝对定位边距自动问题
将“position:absolute”应用于具有“margin-left:auto”和“的元素时margin-right: auto”,您可能会注意到边距似乎没有效果。此行为不同于“位置:相对”,其中边距按预期工作。为了理解这种差异,让我们更深入地研究底层机制。
当一个元素被绝对定位时,它就会从文档的正常流程中删除。这意味着它不再与其相邻元素交互,并且其大小仅由其显式尺寸或其容器的大小决定。因此,如果未显式设置元素的宽度,则浏览器计算的值为 'auto',在大多数情况下为 0。
在这种情况下,应用“margin-left: auto”并“margin-right: auto”尝试通过将左右边距设置为元素宽度的一半来在元素周围创建空间。但是,由于元素的计算宽度为 0,因此计算出的边距值也变为 0。这就是为什么边距看起来没有效果。
相反,当使用“position:relative”时,元素保持不变在文档的正常流程中。它的大小由它的内容和它在流中占据的空间决定。当应用“margin-left: auto”和“margin-right: auto”时,边距是根据元素的实际宽度计算的,在这种情况下,实际宽度不为零。因此,边距被正确应用,导致元素在其包含元素内居中。
要使绝对定位的元素居中,您可以指定其宽度和高度,然后使用“position:absolute;left:50” %; 变换: 翻译(-50%, -50%);"将其置于容器的中心。即使边距设置为“自动”,此方法也能准确地将元素定位在所需位置。
以上是为什么'margin: auto”不能与绝对定位的元素一起使用?的详细内容。更多信息请关注PHP中文网其他相关文章!