如何使用具有背景元素背景的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的边距工作？

回答

相关问题