为什么我的绝对/固定位置元素没有位于我期望的位置？ [英] Why aren't my absolutely/fixed-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，然后将顶部设置为静态位置，将 margin-top和 margin-bottom的 auto值设置为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 / 底部到自动，从而顶部将被设置为静态位置

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

。更确切地说，静态顶部的位置是从包含块的顶部边缘到假设框的顶部边缘的距离，该假设框如果元素的指定位置值为静态，则该框将是元素的第一个框。 / p>

..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并求解对于底部

.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屋！