Question

我有两个imcoicated div，其中subdiv与ots parent的左上角对齐。它可以是任何其他地方。在修复top：10时，如何强制细分将其父填充考虑在内。如果父级有一个20个顶部填充，我希望自动将这个考虑在内，并将自己置于父级顶部的20 + 10处。

此问题仅适用于IE8 以下示例适用于IE11和FF25，但不适用于IE8。

<HTML>
<HEAD>
<style>
DIV.A {
    width:150px;
    border:1px solid black;
    position:relative;
    padding:20px;
}

DIV.B {
    position:absolute;
    top:10;
    left:0;
    padding:inherit;
}
</style>
</HEAD>
<BODY>
    <DIV class="A"> some text to see what happens
        <DIV class="B">aaaaaaaa</DIV>
    </DIV>
</BODY>
</HTML>

Answer 1

对于普通的CSS最佳做法，您的要求有点奇怪，因为您说{何时'div.a有padding-top: 20px。 CSS不是那样的动态，除非你使用javascript来调整padding-top div.a，在这种情况下你可以用javascript更改它。但是，如果您希望div.a和div.b拥有相同的padding-top，那么您可以在CSS中声明：

div.a, div.b {
    padding-top: 20px;
}

Answer 2

如果省略top上的.b属性，它将按正常方式定位，这意味着它将尊重.a上的填充。在margin-top: 10px上使用top: 10px代替.b添加额外的顶部间距，同时尊重父级的顶部填充。

.parent {
    position: relative;
    padding: 10px;
    background-color: red;
}

.child {
    position: absolute;
    margin-top: 10px;
    background-color: green;
}

我在IE8中对此进行了测试，结果正常：http://jsbin.com/OnOzOFIX/1

CSS - 将一个子对象相对于其父对齐父对象

2 个答案: