0

我有三个嵌套 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在我的控制范围内。

我唯一的想法是通过 jQuery 移动#div3并附加它。但如果可能的话#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  }
4

3 回答 3

2

如果位置div3是绝对的，它会在他的祖先中查找，直到找到一个相对定位的父。要实现您想要的，您需要：

#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }
于 2012-10-18T10:18:48.000 回答
1

使用position()方法获取DIV2相对于其父级的位置，DIV1并将这些值用作负数，以使 DIV 3 出现在 div1 中。

以下应放在DIV3左上角DIV1

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

演示：http: //jsfiddle.net/q5RgZ/1

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

$('#div3').appendTo('#div1')
于 2012-10-18T11:57:39.157 回答
-1

将#div1位置设置为相对应该可以解决问题。但是如果需要使用position:absolutein #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;
}
于 2012-10-18T10:25:13.780 回答