Javascript 相对+；绝对定位_Javascript_Jquery_Html_Css_Css Position

Javascript 相对+；绝对定位

javascript jquery html css

Javascript 相对+；绝对定位,javascript,jquery,html,css,css-position,Javascript,Jquery,Html,Css,Css Position,我的例子是：我的代码： <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:5

我的例子是：

我的代码：

   <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

。如何在不改变位置的情况下解决问题？

我不知道是否收到了您的问题，但您可以将

#container1

移动到

#container

之外，这样它将相对于

-元素，而不是

#container

-元素

<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>

试试集装箱顶部边距：-50px，顶部边距：130px

Css HTML

“我将container2顶部位置设置为130”container2在哪里，你是指container1吗？你可以从container1的

top

值中减去container的

top

值（得到80）：Etash yes container 1将CSS代码放入外部文件（由.html文件调用），而不是html标记中是最佳做法（请原谅我的英语）

#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;"
}