Html 绝对位置内的绝对定位

Absolute positioning inside absolute position

提问by pufos

I have 3 divelements.

我有3个div元素。

1st divis bigger (wrap) and has position:relative;

第div一个更大（包裹）并且有position:relative;

2nd divis positioned absolute to the 1st divrelative positioning (and is included in the 1st div)

2nd相对于div1stdiv相对定位绝对定位（并包含在 1st 中div）

3rd divis contained in the 2nd divand also has absolute positioning.

3rddiv包含在 2nd 中div，也有绝对定位。

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Why is the 3rd divposition absolute to the 2nd div(which is also absolute position to the 1st div) and not to 1st divthat has relative position ?

为什么第三个div位置绝对是第二个div（这也是第一个的绝对位置div）而不是div具有相对位置的第一个？

Because the 3rd divis absolute positioning to the absolute positioned 2nd div.

因为 3rddiv是绝对定位到绝对定位 2nd div。

回答by Pekka

Because position: absoluteresets the relative position for children just as position: relativedoes.

因为position: absolute就像一样重置孩子的相对位置position: relative。

There is no way around this - if you want the third divto be absolutely positioned relatively to the first one, you will have to make it a child of the first one.

没有办法解决这个问题 - 如果您希望第三个div相对于第一个绝对定位，则必须使其成为第一个的子项。

回答by Mike Tunnicliffe

Both position:relativeand position:absoluteestablish containing elements as positioning ascestors.

二者position:relative并position:absolute建立包含元素作为定位ascestors。

If you need div 3 to be positioned based on div 1 then make it a direct child of div 1.

如果您需要基于 div 1 定位 div 3，则使其成为 div 1 的直接子级。

Note that position: relativemeans the element is positioned relative to its naturalposition and position: absolutemeans the element is positioned relative to its first position:relativeor position:absoluteancestor.

请注意，这position: relative意味着该元素相对于其自然位置定位，并且position: absolute意味着该元素相对于其第一个position:relative或position:absolute祖先定位。

回答by Gaurav

Position static:the static position is the default way an element will appear in the normal flow of your HTML file if no position is specified at all.

静态位置：如果根本没有指定位置，静态位置是元素在 HTML 文件的正常流中出现的默认方式。

Important: top, right, bottomand leftproperties HAVE NO EFFECT ON A STATICALLY POSITIONED ELEMENT.

重要提示：top，right，bottom和left性能没有影响静态定位的元素。

Position relative:positioning an element with the relative value keeps the element (and the space it occupies) in the normal flow of your HTML file.

相对位置：使用相对值定位元素可以使元素（及其占用的空间）保持在 HTML 文件的正常流中。

You can then move the element by some amount using the properties left, right, topand bottom. However, this may cause the element to overlap other elements that are on the page—which may or may not be the effect that you want.

然后，您可以通过一定量使用属性移动元素left，right，top和bottom。但是，这可能会导致元素与页面上的其他元素重叠——这可能是也可能不是您想要的效果。

A relatively positioned element can move from its spot, but the space it occupied remains.

一个相对定位的元素可以从它的位置移动，但它占据的空间仍然存在。

Position absolute:applying the absolute position value to an element removes it from the normal flow. When you move the absolute positioned element, its reference point is the top/left of its nearest containing element that has a position declared other than static—also called its nearest positioning context. So, if no containing element with a position other than static exists, then it will be positioned from the top-left corner of the body element.

绝对位置：将绝对位置值应用于元素会将其从正常流中移除。当您移动绝对定位元素时，它的参考点是其最近包含的元素的顶部/左侧，该元素的位置声明不是静态的 - 也称为最近的定位上下文。因此，如果不存在位置不是 static 的包含元素，那么它将从 body 元素的左上角定位。

In your case 3rd's nearest containing container is 2nd.

在您的情况下，第三个最近的容器是第二个。

回答by valk

Yet another clarifying answer.

另一个澄清的答案。

Your current scenario is this:

你目前的情况是这样的：

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

And you're kind of struggling with it.

你有点挣扎。

If you can change the HTML, simply do this:

如果您可以更改 HTML，只需执行以下操作：

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

回答by atzom

The reason why the 3rd divelement is absolutely positioned to the 2nd divelement is because as the CSS spec explains here, is because the "parent" element (better said: containing block) of an absolutelypositioned element is notnecessarily its immediate parent element, but rather its immediate positionedelement i.e. any element whose position is set to anything but staticfor example position: relative/absolute/fixed/sticky;

为什么第三个原因div元素绝对定位的第二个div元素是因为CSS规范解释这里，是因为“父”元素（还好说：包含块）的的绝对定位的元素并不一定是其直接的父元素，但而是它的直接定位元素，即位置设置为任何元素的任何元素，但static例如position: relative/absolute/fixed/sticky;

Hence, whenever possible in your code, if you want the 3rd divelement be absolutely positioned in regards to the 1st divyou should make your 2nd divelement as position: static;which is its default value (or just simply remove any position: ...declaration in the rule set of your 2nd divelement).

因此，只要在您的代码中可能，如果您希望第三个div元素相对于第一个元素绝对定位，div您应该将第二个div元素设为position: static;其默认值（或者只是简单地删除position: ...第二个div元素的规则集中的任何声明） .

The above will make the 1st divthe containing blockof the 3rd absolutely positioned div, ignoring the 2nd divfor this positioning purpose.

以上将使第一个div作为第三个绝对定位的包含块，为了这个定位目的div而忽略第二个div。

Hope it helps.

希望能帮助到你。

回答by Guest1234

In case anyone is still looking for an answer to this.

如果有人仍在寻找答案。

I was able to achieve this result by adding a clear: both;style to the first absolutely positioned div which reset the child and allowed it to use it's own absolutepositioning.

我能够通过向clear: both;第一个绝对定位的 div添加样式来实现这一结果，该样式重置子项并允许它使用自己的absolute定位。