相对+绝对定位 [英] relative + absolute positioning

问题描述

我的示例： http://jsfiddle.net/kwnk8qup/

我的代码：

 < div id =containerstyle =position：relative; margin -top：50px; margin-left：50px; width：200px; height：300px; border：2px solid red;> 
< div id =container1style =position：absolute; margin-top：130px; margin-left：30px; width：50px; height：50px; border：2px solid＃a1a1a1;> 
< / div> 
< / div> 
  （parent div）位置是relative  container1 （子）位置是绝对的。我将 container2 顶部位置设置为 130px ，它可以从 container （parent div）顶部位置，但我需要从文档位置显示 130px 。 
解决方案
尝试Margin-top：-50px的container1和top：130px 
  http://jsfiddle.net/30owkpv7/  
 
 
 < h2> Css  
 
 
  #container {
 position：relative; 
 margin-top：50px; 
 margin-left：50px; 
 width：200px; 
 height：300px; 
 border：2px solid red; 
} 
＃container1 {
 position：absolute; 
 margin-top：-50px; / *你需要130从容器的身体（-50）* / 
 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>  
 
My example: http://jsfiddle.net/kwnk8qup/

My code:
   <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>  
The container (parent div) position is relative container1 (child) position is absolute. I set the container2 top location as 130px, it can be calculated from container (parent div) top position but I need to show 130px from document position. How to resolve with out changing positioning?
解决方案
Try Margin-top: -50px for the container1 and 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>

                        
这篇关于相对+绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！