如何使用具有背景元素背景的div的邊距工作？

你可以在這裏看到問題在jsfiddle - http://jsfiddle.net/Askerov/xz4t4bce/如何使用具有背景元素背景的div的邊距工作？

事情是我想移動裏面的元素，但我不希望父元素移動它？任何人都可以解釋它是如何工作的？我如何移動這樣的元素？

.aa{ 
background:#ccc; 
width:600px; 
height:300px; } 
.bbb{ 
background:#333; 
width:150px; 
height:50px; 
margin-top:40px;} 

<div class='aa'> 
<div class='bbb'> 
</div>

來源

2014-12-02 askerovlab

有多種選擇。將「overflow：hidden」添加到父級或「float-left」或添加不可見的1px頂部邊框。 – 2014-12-02 16:57:45

不可分割的邊框可以工作，但是......你能解釋這是怎麼發生的？ – askerovlab 2014-12-02 16:59:35

這可能有幫助 - http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element – 2014-12-02 17:01:04

你看到collapsing margins。只需添加overflow:auto;父div來恢復行爲，你尋求

jsFiddle example

來源

2014-12-02 17:02:44 j08691

隨時添加元素的位置，一旦你做到這一點，它可以讓你移動它，在這裏看到：

.aa{ 
    background:#ccc; 
    width:600px; 
    height:300px; 
    position:relative; 
} 

.bbb{ 
    background:#333; 
    width:150px; 
    height:50px; 
    top:40px; 
    position:absolute; 
}

jsFiddle

來源

2014-12-02 19:09:23 Alin

如何使用具有背景元素背景的div的邊距工作？

回答

相關問題