我有以下问题:我有一个父亲div,这个位置是“相对的” . 在这个div里面我有2个儿子 . 第一个son-div应该相对于father-div定位 . 但是第二个son-div应该定位到整个浏览器窗口 .
我的HTML和CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
我现在的问题是,son2-div也相对于father-div定位 . 有没有可能告诉son2-div,它应该能够完成父亲的“位置:相对”,并使左侧和顶部对整个窗口绝对绝对?
我的问题是:我应该在一个非常大的,复杂的HTML结构中改变它,所以我不可能改变HTML结构 .
5 回答
遗憾的是,如果不改变HTML结构,这是不可能的 . 绝对定位的div将始终根据其第一个相对定位的父级来定位自身 .
但是你可以做的是改变你的
#father
元素的宽度/高度,这样你仍然可以正确定位你的#son2
元素 . 这实际上取决于您的布局以及在不破坏布局的情况下编辑#father
元素的距离 . 或者,如果可能,更改您的CSS,这样您就不需要在#son1
上position: absolute;
(之后您可以从#parent
中删除position: relative;
) .第一次改变
至
你应该把你的第二个儿子div留在你父亲的div之外 .
不需要使用
position: relative;
作为父divson1应为
position: relative;
为您的目标 .我强烈建议您使用
background-color
和width
,height
查看您网页上div的位置 .你的代码中也有一个简单的错误:
你应该指定测量单位;
谢谢您的回答!
无需更改父元素的宽度/高度 . son1元素已经显示正确 . 我现在将“son2”的位置改为“固定”,但它没有效果:(
我不能改变父亲的立场,因为父亲内部的另一个儿子元素需要“亲戚” .
另一个想法:我使用JS来出现son2-div . 在那里,我计算整个窗口的x和y位置(窗口宽度/高度) . 这有效,我只是遇到父亲的亲戚位置的麻烦 . father-div以窗口为中心,因此它的x位置是可变的(取决于窗口大小) .
所以我的问题是:有没有可能读出父亲的div的x位置?所以我可以从我绝对计算的x位置中减去它 .