为什么我绝对定位的元素不在我期望的位置？

问题描述 投票：1回答：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 positioning
3个回答
0
投票

要正确理解这一点，您需要参考official sepcification，您可以在其中找到元素必须满足的等式：

'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保持为auto，因此top将设置为静态位置

..更准确地说，'top'的静态位置是从包含块的顶部边缘到假设框的顶部边缘边缘的距离，如果其指定的“位置”值具有该假想框的第一个框。一直'静止'..

为了方便起见，如果你没有设置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"></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>

同样的逻辑适用于the left property

您可能还会注意到使用包含块的单词，这个单词在这里非常重要并在same specification中进行了解释

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

...

  1. 如果元素具有'position：absolute'，则包含块由最近的祖先建立，其中'position'为'absolute'，'relative'或'fixed'，方式如下：

...

并且它还不够，因为还有其他属性（下面列出）也建立了一个包含块，所以你可以让一个元素相对于一个没有定位的祖先定位！

filter财产：https://stackoverflow.com/a/52937920/8620333

transform财产：https://stackoverflow.com/a/15256339/8620333（与perspective相同）

will-change财产：https://stackoverflow.com/a/53680794/8620333

2
投票

您必须始终在绝对定位的元素上设置top:0; left:0;（或者您想要的顶部，右侧，底部，左侧的任何值）。

-1
投票

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

在这种情况下，绝对位置与兄弟一起工作，而不是与祖先一起工作。

关于祖先和兄弟姐妹，有一个很好的文件：qazxsw poi

Ancestors and siblings
.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元素放在div容器后面都没有问题

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

关于第二部分，那个盒子出现在那里，因为盒子里面没有关于盒子绿色的顶部和右边的问题，得到了吗？我举个例子：

Documentation of postion
.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;
}

您可以看到灰色和黄色框不会改变行为，即使顶部和右侧是否在兄弟姐妹中。

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