Question

我正在尝试为我的网页创建一个布局，我想为我的某个部分创建某种类型的背景。以下是短标记的样子：

HTML

<body>
    <div class="parentContainer">
        <div class="childContainer">
            Cotent inside the child element.
        </div>
    </div>
</body>

CSS：

.parentContainer{
    position:relative;
    margin:9% 0 9% 20%;
    background-color:grey;
}
.childContainer{
    height:50px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: yellow;
}

这也是一个小提琴：http://jsfiddle.net/bS2kv/

然而，在考虑父母的边距之后，在绝对定位的子元素（在这种情况下）占据位置（顶部：0，左：0）。我希望子元素忽略任何边距值（不固定为10/20 / 40px）并且适合父级的最左上角。怎么办呢？

Answer 1

给父元素position: static产生预期的效果

DEMO http://jsfiddle.net/bS2kv/4/

Answer 2

使用填充而不是保证金是否符合您的需求？这样的事情：http://jsfiddle.net/bS2kv/3/

.parentContainer{    
    position:relative;
    padding:9% 0 9% 20%;
    background:gray;    
    height:80px;
}
.childContainer{
    height:50px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: yellow;

}

定位绝对子元素忽略父级的边距

2 个答案: