Question

我有三个嵌套div的结构

<div id="div1"> 
   <div id="div2">     // has come content
      <div id="div3"> 
                        // has some content with a form
      </div>
   </div>
</div>

所有三个div都是绝对的。现在我想根据#div3定位#div1 如果我#div3是right:0px;，那么它应该转到#div1的最右边

注意请不要要求更正我未开发的结构，#div1和#div2不在我的控制范围内。

我只有想法是移动#div3并通过jQuery将其附加到#div1。但如果可能的话，我希望有一个纯CSS解决方案。否则我会选择jQuery append

我以为我已经解释好了css不会被要求。但是听到了的 CSS

#div1 {
position: absolute;
display: none;
}

#div2 
{
position: absolute;
top: 85px;
left: 56px;
width: 300px;
z-index: 2;
}

#div3 {//what ever you want to write to make it relative to #div1  }

Answer 1

如果div3的位置是绝对的，它会看到他的祖先，直到它找到一个相对定位的父母。为了达到你想要的目标，你需要：

#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }

Answer 2

使用position()方法获取相对于其父DIV2的{{1}}位置，并将这些值视为否定，以使DIV 3显示在div1中。

以下内容应将DIV1放在DIV3

的左上角

DIV1

DEMO：http://jsfiddle.net/q5RgZ/1

另一个简单的解决方案是将div3移出div2并放入div1

var div2Pos= $('#div2').position();
$('#div3').css({top: 0-div2Pos.top, left: 0-div2Pos.left})

Answer 3

将#div1位置设置为亲戚应该可以解决问题。但如果在position:absolute中使用#div1是必需的，则包含这三个div标记的元素应使用position:relative。像这样：

HTML：

<div id="container">
  <div id="div1"> 
     <div id="div2">     // has come content
        <div id="div3"> 
                        // has some content with a form
        </div>
     </div>
  </div>
</div>

CSS：

#container {
  position: relative;
}

将绝对div定位为其父父级

3 个答案: