Question

我的代码：

   <div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
          <div id="container1" style="position:absolute;margin-top:130px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">           
          </div>   
    </div>

container（父div）位置是相对container1（子）位置是绝对的。我将container2顶部位置设置为130px，可以从container（父div）顶部位置计算，但我需要从文档位置显示130px。如何解决不变的定位？

Answer 1

我不知道我是否收到了您的问题，但您可以将#container1移到#container之外，以便它相对于<body> - 元素而不是{ {1}} - 。元素

#container

http://jsfiddle.net/q29ey2qt/

Answer 2

尝试Margin-top：-50px为container1和top：130px http://jsfiddle.net/30owkpv7/

的CSS

#container {
  position:relative;
  margin-top:50px;
  margin-left:50px;
  width:200px;
  height:300px;
  border: 2px solid red;
  }
#container1 {
  position:absolute;
  margin-top:-50px; /*you need 130 from body (-50) of container */
  top:130px; /*top from body*/
  margin-left:30px;
  width:50px;
  height:50px;
  border: 2px solid #a1a1a1;"
}

HTML

<div id="container"> <div id="container1"> </div> </div>

相对+绝对定位

2 个答案:

的CSS

HTML