Html 定位绝对子元素忽略父元素'；s边距_Html_Css

Html 定位绝对子元素忽略父元素'；s边距

html css

Html 定位绝对子元素忽略父元素'；s边距,html,css,Html,Css,我试图在这里为我的网页创建一个布局，我想为我的一个部分创建一个特定类型的背景。下面是简短标记的外观： HTML <body> <div class="parentContainer"> <div class="childContainer"> Cotent inside the child element. </div> </div> </body>

我试图在这里为我的网页创建一个布局，我想为我的一个部分创建一个特定类型的背景。下面是简短标记的外观：

HTML

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

这里还有一把小提琴：

但是，在考虑父元素的边距后，子元素在绝对定位（如本例中所示）时将占据位置（顶部：0，左侧：0）。我希望子元素忽略任何边距值（不固定为10/20/40px），并将其拟合到父元素的最左上角。如何做到这一点？

使用填充代替边距是否符合您的需要？大概是这样的：

给父元素一个

位置：static

将产生所需的效果

演示

可能会迟到，但这做得很好，只需记住将孩子设置为position:absolute；排名：0；左：0；

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

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

}