时间戳

首页 > 解决方案 > 相对定位的段落超出视口

html - 相对定位的段落超出视口

问题描述

.feature {
    position:relative;
    left:50%; 
}
<p class="feature">This is super cool feature..</p>

上面的代码导致以下情况：文本居中，但滚动条水平显示。这让我认为feature段落的宽度仍然保持不变，这就是它超出视口的原因。

如果我将位置更改为absolute，它不再超出视口。

为什么会这样？如果我们说absolute定位意味着它不再是流程的一部分，那么这个答案是不够的。它可能不是 part ，但宽度仍然是相同的，因此它也应该超出视口，因为它发生在相对范围内。

标签： htmlcss

解决方案

“绝对定位”和相对定位一样，只是偏移量是相对于整个浏览器窗口，而不是元素的原始位置。由于和页面的静态流已经没有关系了，请看正常流

通常，默认情况下，块级元素会占用其容器元素的全部可用宽度。但是，当您设置 position: fixed 或 absolute 时，该元素的显示方式与其他元素的显示方式不同。

根据MDN：

块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。

因此，block在引用绝对或固定定位元素时，级别元素的容器的含义会发生变化。将其称为父级更有意义。

由于没有容器元素可以继承其宽度，因此如果您检查它，您会看到它的行为更像一个内联块类型元素，您会看到我的解释即将到来。

编辑： 如果您想查看绝对定位元素的宽度是如何计算的，请查看W3C

推荐阅读