相对+绝对定位答案

【问题标题】：relative + absolute positioning相对+绝对定位
【发布时间】：2015-04-27 00:59:23
【问题描述】：

我的代码：

   <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。不改变定位如何解决？

【问题讨论】：

" 我将 container2 的顶部位置设置为 130" container2 在哪里，你的意思是 container1 吗？
你可以从 container1 的 top 值中减去容器的 top 值（你会得到 80）：jsfiddle.net/kwnk8qup/2
Etash 是容器 1
最好将 CSS 代码放入外部文件（由 .html 文件调用），而不是放入 HTML 标签中（请原谅我的英语）

标签： javascript jquery html css css-position

【解决方案1】：

对于 container1 和 top:130px 尝试 Margin-top: -50px 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】：

我不知道我是否收到了您的问题，但您可以将 #container1 移到 #container 之外，这样它将相对于 <body>-element 而不是 #container-element。

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

http://jsfiddle.net/q29ey2qt/

【讨论】：