为什么我绝对定位的元素没有位于我期望的位置? [英] Why aren't my absolutely-positioned elements located where I expect?

问题描述

我只是在学习CSS的定位.基于我发现有用的文章，我开始玩转.

I'm just learning the positioning in CSS. Based on the article that I've found useful, I'd started to playing around.

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

With the following code, I cannot understand why the absolute grey-box div is outside of it's relative parent. I expected that the grey-box will be on the top-left corner of the container.

.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中的第二个位置.

Also can't understand in the following case why the grey-box not in the top-left corner, but moved after the empty space left by the orange-box there. I've just moved the grey-box to the second place inside the container 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个框的非常简单的示例.

All the detailed documentation (e.g. MDN) and tutorials that I've found just demonstrating very simple examples with 2-3 boxes.

推荐答案

要正确理解这一点，您需要参考

To correctly understand this, you need to refer to the official specification where you find the equation the element must satisfy:

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

我们没有任何边框和填充，因此在您的情况下，它只会是:

We don't have any border and padding so in your case it will simply be:

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

如果您在下面阅读，将会发现以下内容:

And if you read under you will find this:

1. "top"和"bottom"为"auto"，"height"不是"auto"，然后将"top"设置为静态位置，为"margin- top"和"margin-bottom"设置为0，并求解"bottom".

1. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'.

因此，在您的情况下，您已设置高度并将top/bottom保持为自动，因此顶部将设置为静态位置

So in your case, you have set a height and kept top/bottom to auto thus top will be set to static position

..更准确地说，顶部"的静态位置是从包含块的顶部边缘到假设框的顶部边缘的距离，假设框如果指定了位置"，则该框将是元素的第一个框值一直是静态".

..More precisely, the static position for 'top' is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static'..

为了简单起见，如果未设置position:absolute，则为元素的位置.

To make it easy, it's the position of the element if you didn't set position:absolute.

这是一个易于理解的简单示例

Here is an easy illustration to better understand

.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(默认位置)之一.

Note the static position of the first element that is kept if we add position:absolute. We didn't specify any top value so the browser will use a default one that is the one of the position:static (default position) of the element.

如果您不想这样做，只需设置最高值，然后遵循以下规则:

If you don't want this, simply set the top value and you fall into this rule:

1. 底部"为自动"，顶部"和高度"不是自动"，然后将"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>

相同的逻辑适用于左属性

您可能还会注意到使用了包含块这个词，在这里非常重要，并在

You may also notice the use of the word containing block which very important here and explained in the same specification

有时会相对于某个矩形(称为元素的包含块)来计算元素框的位置和大小.元素的包含块定义如下:

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

...

1. 如果元素具有"position:absolute"，则包含块由最近的祖先以"absolute"，"relative"或"fixed"的"position"建立:

...

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

And it's not enough as there is other properties (listed below) that also establish a containing block so you can have an element positionned relatively to an ancestor that is not positionned!

相关:父母的CSS过滤器会破坏孩子的定位

这篇关于为什么我绝对定位的元素没有位于我期望的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！