Question

让我们说你有这样的事情：

<div id="first">
  <div id="second">
     <div id="third">
        <div id="zeone"></div>
     </div>
  </div>
</div>

#first, #second, #third {
  position: relative;
}
#first {
  different from others height, width etc
}
#second {
  different from others height, width etc
}
#third {
  different from others height, width etc
}

通常情况下，如果我想将zeone div设置为position: relative并将其设为right: value;或/和left: value;，则它将相对于定位的祖先 - div为第三。有没有办法让它相对于div第一或第二？如果是这样，我怎么能实现这个目标呢？

Answer 1

根据我的理解，你想在div中绝对定位一个div，但是让我在absolute和relative中向你展示relative。所有position:relative div。

相对父母，绝对孩子。

只需制作父position:absolute和子#first { position: relative; background-color:#C555CC; width:500px; } #second { position:absolute; background-color:#CCC555; right:0; width:400px; } #third{ background-color:#C555CC; width:300px; height:300px; } #zeone{ position:absolute; width:200px; right:0; height:200px; background-color:#FFF; }即可。例如：

<div id="first">First
  <div id="second">Second<br />
    This is absolute positioned.
     <div id="third">Third
        <div id="zeone">Inner-most<br />This is absolute positioned.</div>
     </div>
  </div>
</div>

div {
  width: 500px;
}
#first {
  left: 0px;
  right: 0px;
  border: 3px solid #755D21;
}
#second {
  position: relative;
  left: 50px;
  border: 3px solid #73AD21;
}
#third {
  position: relative;
  right: 50px;
  border: 3px solid #000;
}
#zeone {
  left: 50px;
  position: relative;
  border: 3px solid #0000FF;
}

或者，如果你只是意味着所有亲戚，

相对父母，亲戚。

<div id="first">First
  <div id="second">Second
    <br />This is absolute positioned.
    <div id="third">Third
      <div id="zeone">Inner-most
        <br />This is absolute positioned.</div>
    </div>
  </div>
</div>

ChannelExec

右，左和位置相对祖先问题

1 个答案: