CSS CSS兄弟绝对定位
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10624771/
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
Css Sibling Absolute Positioning
提问by Arg Geo
Is there any way to absolutely position a div relatively to its sibling? For example: Inside a div there are two other divs - div1 and div2. I want to absolutely position div2 relatively to div1.
有没有办法绝对定位一个 div 相对于它的兄弟?例如:在一个 div 中还有另外两个 div - div1 和 div2。我想绝对定位 div2 相对于 div1。
采纳答案by Farray
Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.
绝对定位依赖于“当前定位上下文”,它可能包括父元素(如果绝对或相对定位)但永远不会包括兄弟元素。
Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.
你能重组你的dom,让你有一个亲子而不是兄弟姐妹吗?如果是这样,您可以将父位置设置为相对或绝对位置,将子位置设置为绝对位置,子位置相对于父位置将保持绝对位置。
回答by Vladimir Starkov
There is no way using absolute position, according to w3cspecification:
根据w3c规范,无法使用绝对位置:
In the absolute positioning model, a box is explicitly offset with respect to its containing block
在绝对定位模型中,一个盒子相对于它的包含块是显式偏移的
— relatively to parent block, not to sibling one
— 相对于父块,而不是兄弟块
And no way to use relative positioning, also according to to w3cspecification:
并且无法使用相对定位,同样根据w3c规范:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position.
一旦根据正常流程布置了一个盒子或浮动了一个盒子,它就可以相对于这个位置移动。
— relatively to block's position, not to sibling block
— 相对于块的位置,而不是同级块
summary:
概括:
Nobody can solve problem you described
没有人能解决你描述的问题
回答by Denny Mueller
Try it with jquery
用 jquery 试试
<script type="text/javascript">
$('#div2').css('margin-left', $('#div1').outerWidth() +XXX + 'px');
回答by MK_Dev
Depending on your needs, you can float them or position both absolute with appropriate left/top/right/bottom values.
根据您的需要,您可以使用适当的左/上/右/下值浮动它们或将它们定位为绝对值。
Post your markup and explain exactly what you're trying to achieve.
发布您的标记并准确解释您要实现的目标。