为什么我的绝对/固定定位元素没有位于我期望的位置？

问题描述 投票：0回答：3

我只是在学习CSS中的定位。根据我发现有用的文章，我开始玩了。

使用以下代码，我无法理解为什么绝对灰盒 div 在其相对父级之外。我预计灰色框将位于容器的左上角。

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

在下面的案例中也无法理解为什么灰色框不在左上角，而是移动到橙色框留下的空白区域之后。我刚刚将灰色框移动到容器 div 中的第二个位置。

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-orange"></div>
  <div class="box-grey"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

我发现的所有详细文档（例如 MDN）和教程只是用 2-3 个框演示非常简单的示例。

html css css-position
3个回答
1
投票

要正确理解这一点，您需要参考官方规范，您可以在其中找到元素必须满足的方程式：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

我们没有任何边框和填充，所以在您的情况下，它只是：

'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block

如果您阅读下面的内容，您会发现：

  1. 'top'和'bottom'是'auto'并且'height'不是'auto'，然后将'top'设置为静态位置，为'margin-top'和'margin-bottom设置'auto'值' 到 0，并求解'底部'。

所以在你的情况下，你已经设置了一个高度并保持 

top
/
bottom
自动因此顶部将设置为 static position

..更准确地说，“top”的静态位置是从包含块的上边缘到假设框的上边距边缘的距离，如果指定的“position”值，该框将成为元素的第一个框一直是“静态的”..

为了简单起见，如果你没有设置它就是元素的位置

position:absolute
.

这里有一个简单的插图，可以更好地理解

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-green {
  height:20px;
  background:green;
}
<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey">I am absolute</div>
</div>

注意如果我们添加 

position:absolute
保留的第一个元素的静态位置。我们没有指定任何最高值，因此浏览器将使用默认值，即元素的
position:static
（默认位置）之一。

如果你不想要这个，只需设置最高值，你就会陷入这个规则：

  1. 'bottom'是'auto'，'top'和'height'不是'auto'，然后将'margin-top'和'margin-bottom'的'auto'值设置为0并解决'bottom'

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
  top:0;
}

.box-green {
  height:20px;
  background:green;
}
<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

同样的逻辑适用于左边的属性

您可能还会注意到使用containing block这个词在这里非常重要，并在same specification

中进行了解释

元素框的位置和大小有时是相对于某个矩形计算的，称为元素的包含块。元素的包含块定义如下：

...

  1. 如果元素有'position: absolute'，则包含块由'position'为'absolute'、'relative'或'fixed'的最近祖先建立，如下所示：

...

这还不够，因为还有其他属性（下面列出）也建立了一个包含块，因此您可以相对于未定位的祖先定位元素！

相关：为什么在父级上应用 CSS-Filter 会破坏子级定位？

1
投票

您必须始终在绝对定位的元素上设置

top:0; left:0;
（或您想要的顶部、右侧、底部、左侧的任何值）。

-1
投票

首先，元素相对于其第一个定位（非静态）祖先元素定位。

在这种情况下，绝对位置适用于兄弟姐妹，而不适用于祖先。

关于祖先和兄弟姐妹，有一个关于它的神文档：祖先和兄弟姐妹

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

如果我把元素放在 div 容器之后，一切都没有问题

职位文件

关于第二部分，那个盒子出现在那里是因为 box-gery 与 box-green 的顶部和右侧无关，明白吗？我举个例子：

.container {
  background: lightblue;
  position: relative;
}

.box-orange2 {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  z-index: 2;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-yellow {
  background: yellow;
  height: 100px;
  width: 100px;
  position: absolute;
}
<div class="container">
  <div class="box-orange2"></div>
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-yellow"></div>
</div>

你可以看到灰色和黄色框不会改变行为，即使顶部和右侧是否在同级中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.