绝对定位的元素受父母上的填充影响

我的问题是为什么在div.container中更改填充会影响div.blueBox？由于blueBox定位设置为绝对值，因此它将从正常流程中取出，并且应该与元素相关。绝对定位的元素受父母上的填充影响

HTML：

<body> 
     <div class="container"> 
      <div class="box blueBox"></div> 
     </div>  
     <div class="box greenBox"></div> 

     <h1>Understanding CSS Positioning</h1> 
     <p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative to the top level container, or the closest parent with a set positioning.</p> 

    </body>

CSS：

body { 
    background-color: #1f1f1f; 
    height: 2000px; 
    color: #bfbfbf; 
} 

h1 { 
    font-weight: normal; 
} 

em { 
    color: #dd740b; 
} 

.box { 
    width: 100px; 
    height: 100px; 
    margin-bottom: 10px; 
} 

.blueBox { 
    background: #627da0; 
    position: absolute; 
} 

.greenBox { 
    background: #5b8054; 
} 

.container { 
    background: rgba(0,0,0,.4); 
    padding: 10px; 
}

http://jsfiddle.net/pawelpodsiadly/brdc8dvy/

来源

2015-04-06 pawel.podsiadly

当添加的位置是绝对的，你需要定义：

position: absolute; 
left: 0; 
top: 0;

来源

2015-04-06 14:13:16 Kay

您需要定义其余的position元素。如top或left等。

您可能也需要relative而不是absolute。

.blueBox { 
    background: #627da0; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

Fiddle updated

来源

2015-04-06 14:14:04 JClaspill

绝对定位所说的元件在适当位置相对于其最近的祖先还具有比静态定位其他。

如果你想.blueBox位于相对于体，设置顶部和左侧值：

body { 
 
    background-color: #1f1f1f; 
 
    color: #bfbfbf; 
 
} 
 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
.blueBox { 
 
    background: #627da0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.container { 
 
    background: pink; 
 
    padding: 10px; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="box blueBox"></div> 
 
    </div> 
 
    <div class="box greenBox"></div> 
 
    <h1>Understanding CSS Positioning</h1> 
 

 
    <p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative 
 
    to the top level container, or the closest parent with a set positioning.</p> 
 
</body>

如果你想让它定位于.container，你需要定位.container ：

body { 
 
    background-color: #1f1f1f; 
 
    color: #bfbfbf; 
 
} 
 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-bottom: 10px; 
 
} 
 
.blueBox { 
 
    background: #627da0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.container { 
 
    background: pink; 
 
    padding: 10px; 
 
    position: relative; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="box blueBox"></div> 
 
    </div> 
 
    <div class="box greenBox"></div> 
 
    <h1>Understanding CSS Positioning</h1> 
 

 
    <p><em>Absolute positioning</em> takes an element out of document flow, meaning the browser acts as if the element has no width and height, and the other elements on the page move up as if it was never there. The position of the element is then fixed relative 
 
    to the top level container, or the closest parent with a set positioning.</p> 
 
</body>

来源

2015-04-06 14:23:33 isherwood

绝对定位的元素受父母上的填充影响

回答

相关问题