say I have something like
说我有类似的东西
<body><div id="a"><div id="b">some content</div></div>more content<body>
and I don't know how much height "some content" is going to be. But I have #b styled to position: absolute and #a styled to position: relative so #b's position is relative the the top left corner of #a. Is there some way I can make #a expand to contain #b some that "more content" gets pushed after?
我不知道“某些内容”的高度是多少。但我有#b样式定位:绝对和#a样式定位:相对所以#b的位置相对于#a的左上角。有没有什么方法可以让#a扩展到包含#b一些“更多内容”被推后?
thanks
4 个解决方案
#1
2
Replacing absolute with relative might get you what you want, like in this jsFiddle.
用相对代替绝对可能会得到你想要的东西,比如在这个jsFiddle中。
#2
2
Your example is flawed as there is no actual need to have pos:abs on div#b as by default that element would be set at the top/left of div#a.
你的例子是有缺陷的,因为没有实际需要在div #b上使用pos:abs,因为默认情况下该元素将设置在div #a的顶部/左侧。
Using css position will take its applied element outside of the normal markup flow, even if you was to use pos:rel on div#b it would only increase the height of div#a it would not take into consideration any positioning you may have also applied to it.
使用css位置将其应用元素置于正常标记流之外,即使你要使用pos:rel on div #b它只会增加div的高度#a它不会考虑你可能还有的任何定位适用于它。
There is a way you could achieve what you are after, but that would rely on using JavaScript.
有一种方法可以实现您的目标,但这将依赖于使用JavaScript。
#3
1
It sounds like position relative for #b might be a better solution.
听起来像#b的相对位置可能是更好的解决方案。
As #b is the first element in #a it woudl naturally appear in the top left corner of #a, so position relative will position relative to the same point as position absolute.
由于#b是#a中的第一个元素,它自然会出现在#a的左上角,因此位置相对位置将相对于与绝对位置相同的点定位。
Also, say you want to push #b down by 30px, then you set
另外,假设您想将#b按下30px,然后设置
#b{position:relative;top:30px;margin-bottom:30px;}
Content will clear the bottom of #b because position:relative leaves a block in the content flow equal to the height of #b + 30px;
内容将清除#b的底部,因为position:relative在内容流中留下一个块,等于#b + 30px的高度;
#4
0
No. Absolute positioning removes elements from document flow. Their parent and sibling tags have no way of knowing that they are overlapping an absolutely positioned element or not.
不可以。绝对定位会从文档流中删除元素。他们的父母和兄弟标签无法知道它们是否与绝对定位的元素重叠。
#1
2
Replacing absolute with relative might get you what you want, like in this jsFiddle.
用相对代替绝对可能会得到你想要的东西,比如在这个jsFiddle中。
#2
2
Your example is flawed as there is no actual need to have pos:abs on div#b as by default that element would be set at the top/left of div#a.
你的例子是有缺陷的,因为没有实际需要在div #b上使用pos:abs,因为默认情况下该元素将设置在div #a的顶部/左侧。
Using css position will take its applied element outside of the normal markup flow, even if you was to use pos:rel on div#b it would only increase the height of div#a it would not take into consideration any positioning you may have also applied to it.
使用css位置将其应用元素置于正常标记流之外,即使你要使用pos:rel on div #b它只会增加div的高度#a它不会考虑你可能还有的任何定位适用于它。
There is a way you could achieve what you are after, but that would rely on using JavaScript.
有一种方法可以实现您的目标,但这将依赖于使用JavaScript。
#3
1
It sounds like position relative for #b might be a better solution.
听起来像#b的相对位置可能是更好的解决方案。
As #b is the first element in #a it woudl naturally appear in the top left corner of #a, so position relative will position relative to the same point as position absolute.
由于#b是#a中的第一个元素,它自然会出现在#a的左上角,因此位置相对位置将相对于与绝对位置相同的点定位。
Also, say you want to push #b down by 30px, then you set
另外,假设您想将#b按下30px,然后设置
#b{position:relative;top:30px;margin-bottom:30px;}
Content will clear the bottom of #b because position:relative leaves a block in the content flow equal to the height of #b + 30px;
内容将清除#b的底部,因为position:relative在内容流中留下一个块,等于#b + 30px的高度;
#4
0
No. Absolute positioning removes elements from document flow. Their parent and sibling tags have no way of knowing that they are overlapping an absolutely positioned element or not.
不可以。绝对定位会从文档流中删除元素。他们的父母和兄弟标签无法知道它们是否与绝对定位的元素重叠。