Html 绝对位置内的绝对定位
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5928059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute positioning inside absolute position
提问by pufos
I have 3 div
elements.
我有3个div
元素。
1st div
is bigger (wrap) and has position:relative;
第div
一个更大(包裹)并且有position:relative;
2nd div
is positioned absolute to the 1st div
relative positioning (and is included in the 1st div
)
2nd相对于div
1stdiv
相对定位绝对定位(并包含在 1st 中div
)
3rd div
is contained in the 2nd div
and also has absolute positioning.
3rddiv
包含在 2nd 中div
,也有绝对定位。
<div id="1st">
<div id="2nd">
<div id="3rd"></div>
</div>
</div>
Why is the 3rd div
position absolute to the 2nd div
(which is also absolute position to the 1st div
) and not to 1st div
that has relative position ?
为什么第三个div
位置绝对是第二个div
(这也是第一个的绝对位置div
)而不是div
具有相对位置的第一个?
Because the 3rd div
is absolute positioning to the absolute positioned 2nd div
.
因为 3rddiv
是绝对定位到绝对定位 2nd div
。
回答by Pekka
Because position: absolute
resets the relative position for children just as position: relative
does.
因为position: absolute
就像一样重置孩子的相对位置position: relative
。
There is no way around this - if you want the third div
to 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:relative
and position:absolute
establish 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: relative
means the element is positioned relative to its naturalposition and position: absolute
means the element is positioned relative to its first position:relative
or position:absolute
ancestor.
请注意,这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
, bottom
and left
properties 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
, top
and 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 div
element is absolutely positioned to the 2nd div
element 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 static
for 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 div
element be absolutely positioned in regards to the 1st div
you should make your 2nd div
element as position: static;
which is its default value (or just simply remove any position: ...
declaration in the rule set of your 2nd div
element).
因此,只要在您的代码中可能,如果您希望第三个div
元素相对于第一个元素绝对定位,div
您应该将第二个div
元素设为position: static;
其默认值(或者只是简单地删除position: ...
第二个div
元素的规则集中的任何声明) .
The above will make the 1st div
the containing blockof the 3rd absolutely positioned div
, ignoring the 2nd div
for 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 absolute
positioning.
我能够通过向clear: both;
第一个绝对定位的 div添加样式来实现这一结果,该样式重置子项并允许它使用自己的absolute
定位。