0

例如，下面的例子。

html代码：

<body>
        <div id="container">
            <figure id="abtex">
                <img src="images/abtex125.png" />
            </figure>   
        </div>
</body>

CSS 代码：

#container{
    max-width:1050px;
    margin: 0 auto; 
    max-height: 1000px;
}

#abtex {
    position: absolute;
    top:-100px;
    left:400px; 
 }

#abtex不会遵循#container诸如max-widthetc之类的CSS命令吗？

4

2 回答 2

1

您需要在#container元素上设置一个位置，以使子元素的绝对位置相对于它。

来自MDN：

absolute：不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距，它们不会与任何其他边距一起折叠。

换句话说，由于#container没有设置位置，最近定位的祖先 = 身体。设置position:relative为#container典型的解决方案。

于 2012-07-25T16:14:49.313 回答
1

这是关于 CSS 继承的。一些 CSS 属性确实会被继承——大多数不会。

在这些情况下，您需要查看规范或一些 CSS 手册。

有关您的具体情况，请参阅：https ://developer.mozilla.org/en/CSS/max-width。在 MDN 条目中指出，该max-width属性不会被继承（“Inherited: no”）。

另一方面，甚至没有必要max-width为 child指定 a div#abtex，因为它的最大宽度将是父元素的宽度（也可以通过 来操作overflow）。

于 2012-07-25T16:15:46.257 回答