首页 文章

绝对位置到整个窗口

提问于
浏览
8

我有以下问题:我有一个父亲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 回答

  • 0

    遗憾的是,如果不改变HTML结构,这是不可能的 . 绝对定位的div将始终根据其第一个相对定位的父级来定位自身 .

    但是你可以做的是改变你的 #father 元素的宽度/高度,这样你仍然可以正确定位你的 #son2 元素 . 这实际上取决于您的布局以及在不破坏布局的情况下编辑 #father 元素的距离 . 或者,如果可能,更改您的CSS,这样您就不需要在 #son1position: absolute; (之后您可以从 #parent 中删除 position: relative; ) .

  • 1
    #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>
    

    第一次改变

    #son2
    {
      position:absolute;
      left:670;
      top:140;
    }
    

    #son2
    {
      position: fixed; /*change to fixed*/
      left:670px; /*add px units*/
      top:140px; /*add px units*/
    }
    
  • 6

    你应该把你的第二个儿子div留在你父亲的div之外 .

  • 2
    #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>
    
    • 不需要使用 position: relative; 作为父div

    • son1应为 position: relative; 为您的目标 .

    • 我强烈建议您使用 background-colorwidthheight 查看您网页上div的位置 .

    你的代码中也有一个简单的错误:

    left:670;
      top:140;
    

    你应该指定测量单位;

    left:670px;
      top:140px;
    
  • 5

    谢谢您的回答!

    无需更改父元素的宽度/高度 . son1元素已经显示正确 . 我现在将“son2”的位置改为“固定”,但它没有效果:(

    我不能改变父亲的立场,因为父亲内部的另一个儿子元素需要“亲戚” .

    另一个想法:我使用JS来出现son2-div . 在那里,我计算整个窗口的x和y位置(窗口宽度/高度) . 这有效,我只是遇到父亲的亲戚位置的麻烦 . father-div以窗口为中心,因此它的x位置是可变的(取决于窗口大小) .

    所以我的问题是:有没有可能读出父亲的div的x位置?所以我可以从我绝对计算的x位置中减去它 .

相关问题