絕對定位的元素受父母上的填充影響

我的問題是爲什麼在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

絕對定位的元素受父母上的填充影響

回答

相關問題