Question

简单的问题。我只想了解逻辑。为什么带位置的元素：绝对（和浮动：左）也不会占用空间＆＃34;喜欢的位置：亲戚？以及如何强制一个元素与position：absolute来调整父div的大小？

我需要了解这个条件来解决一些问题。

<style>
    .relative,
    .absolute {
        height: auto;
        width: 200px;
        border: 1px solid black;
        margin: 10px;
    }

.relative svg {
        position: relative;
}

.absolute svg {
        position: absolute;
}
</style>


<!-- The height:auto works! -->
<div class="relative">
    <svg width="50" height="50">
        <rect width="50" height="50" style="fill:rgb(255,0,0)" />
    </svg>
</div>

<!-- The height:auto don't works -->
<div class="absolute">
    <svg width="50" height="50">
        <rect width="50" height="50" style="fill:rgb(0,0,255)" />
    </svg>
</div>

Answer 1

position: absolute打破正常流程...

文档的正常流程是您的元素如何堆叠在顶部   彼此之间，从上到下，按照它们出现的顺序   你的标记。

与静态和相对值不同，绝对定位   元素从正常流中移除。这意味着你可以把它   在任何地方，它不会影响或受到任何其他元素的影响   流动。

来源：http://alistapart.com/article/css-positioning-101

CSS SPEC：http://www.w3.org/TR/CSS21/visuren.html

如何强制一个元素与position：absolute来调整父div的大小？

1 个答案: