绝对位置到整个窗口
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对位置到整个窗口相关的知识，希望对你有一定的参考价值。
我有以下问题：我有一个父亲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结构。
遗憾的是，如果不改变HTML结构，这是不可能的。绝对定位的div将始终根据其第一个相对定位的父级来定位自身。
然而你可以做的是改变你的#father元素的宽度/高度，这样你仍然可以正确定位你的#son2元素。这实际上取决于您的布局以及在不破坏布局的情况下编辑#father元素的距离。或者如果可能的话，更改你的CSS，这样你就不需要在position: absolute;上使用#son1（之后你可以从你的position: relative;中删除#parent）。
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>你应该把你的第二个儿子div留在你父亲的div之外。
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>谢谢您的回答！
无需更改父元素的宽度/高度。 son1元素已经显示正确。我现在将“son2”的位置改为“固定”，但它没有效果:(
我不能改变父亲的立场，因为父亲内部的另一个儿子元素需要“亲戚”。
另一个想法：我使用JS来出现son2-div。在那里，我计算整个窗口的x和y位置（窗口宽度/高度）。这有效，我只是遇到父亲的亲戚位置的麻烦。 father-div以窗口为中心，因此它的x位置是可变的（取决于窗口大小）。
所以我的问题是：有没有可能读出父亲的div的x位置？所以我可以从我绝对计算的x位置中减去它。
以上是关于绝对位置到整个窗口的主要内容，如果未能解决你的问题，请参考以下文章