Question

在尝试在项目中放置position: absolute弹出窗口时遇到了一个奇怪的问题。

关于position: absolute MDN说：

该元素已从常规文档流中删除，并且没有空格为页面布局中的元素创建的。

不幸的是，在下面的示例中，使用right: 0和transform: translateX(100%)放置元素会在主体外部创建额外的空间，就好像元素将是position: relative一样。如果我们执行left: 0和transform: translateX(-100%)，则不会发生这种情况。

  .parent {
    width: 100%;
    height: 100vh;
    border: 1px solid red;
    background-color: magenta;
  }
  .child {
    position: absolute;
    transform: translateX(100%);
    width: 100px;
    height: 50%;
    border: 1px solid black;
    right: 0;
    background-color: yellow;
  }

  <div class="parent">
     <div class="child"></div>
  </div>

这里是指向问题示例https://jsbin.com/fikonusayi/edit?html,css,output

的链接

这是浏览器错误还是这是（意外）意外的功能？

P.S。在Chrome和Safari中发现。

Answer 1

这里的问题是关于overflow而不是文档流。如果我们引用the specification：

通常，阻止框的内容仅限于内容边缘   的盒子。在某些情况下，盒子可能溢出，这意味着其内容   位于部分或全部位于框外，例如：

...

后代框的位置绝对，部分位于框的外部。这样的盒子并不总是被其祖先的overflow属性所限制。具体来说，它们不会因自身与其包含的块之间的任何祖先的溢出而受到限制

....

您可能会注意到child之外没有其他定位元素，因此child的{{3}}将成为视口。而且这里的窍门是，滚动条总是从左侧（水平滚动）或顶部（垂直滚动）开始添加到包含块中，因此从顶部或左侧溢出的内容将变得不可访问。

以下是更好地了解此问题的说明：

.parent {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  background-color: magenta;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px}
  to {left:100%}
}

body {
 margin:0;
}

<div class="parent">
  <div class="child"></div>
</div>

如您所见，仅当元素在左侧溢出时，我们才会滚动。如果考虑顶部/底部，则逻辑相同

.parent {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  background-color: magenta;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {top:-100px}
  to {top:100%}
}

body {
 margin:0;
}

<div class="parent">
  <div class="child"></div>
</div>

要确认您的元素确实已从流程中删除，只需添加内容并从父元素中删除固定高度，您将看到没有考虑元素的空间：

.parent {
  border: 1px solid red;
  background-color: magenta;
  position: relative;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  top:0;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px;top:-100px;}
  to {left:100%;top:100%;}
}

body {
 margin:0;
 border:2px solid red;
}

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget maximus nibh. Nam non libero molestie, placerat lorem sed, congue arcu. Aliquam eu ultrices nisi, sed facilisis purus. Suspendisse sit amet tincidunt massa, varius tempor mi. Suspendisse semper finibus ipsum in varius. Maecenas id commodo mi, vitae molestie diam. Nulla a risus cursus, auctor ligula sit amet, vestibulum purus. In in turpis non mi auctor viverra porta ac magna.
  <div class="child"></div>
</div>

与position:relative不同：

.parent {
  border: 1px solid red;
  background-color: magenta;
  position: relative;
  box-sizing:border-box;
}

.child {
  position: relative;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  top:0;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px;top:-100px;}
  to {left:100%;top:100px;}
}

body {
 margin:0;
 border:2px solid red;
}

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget maximus nibh. Nam non libero molestie, placerat lorem sed, congue arcu. Aliquam eu ultrices nisi, sed facilisis purus. Suspendisse sit amet tincidunt massa, varius tempor mi. Suspendisse semper finibus ipsum in varius. Maecenas id commodo mi, vitae molestie diam. Nulla a risus cursus, auctor ligula sit amet, vestibulum purus. In in turpis non mi auctor viverra porta ac magna.
  <div class="child"></div>
</div>

为什么position:fixed不会发生这种情况？仅仅是因为containing block中未指定任何内容。这是我们溢出的所有情况：

不能折断线，导致线框比线框宽   方块盒。

一个块级框对于包含的块来说太宽了。   当元素的'width'属性具有以下值时，可能会发生这种情况   导致生成的块框溢出到容器的侧面   块。

元素的高度超过分配给   包含块（即包含块的高度由   “高度”属性，而不是按内容高度）。

后代框是   绝对位于盒子外面。这样的盒子不是   总是受到祖先的溢出属性的限制；   特别是，它们不会被任何祖先的溢出所限制   在它们和它们的包含块之间

后代盒子有   负边距，使其部分位于盒子外面。   'text-indent'属性使内联框挂在   方块的左边缘或右边缘。

绝对元素溢出文档

1 个答案: