position 脱离文档流导致的问题

最新推荐文章于 2023-02-13 11:39:36 发布

weixin_30298497

最新推荐文章于 2023-02-13 11:39:36 发布

阅读量579

点赞数 1

原文链接：http://www.cnblogs.com/quietxin/p/8918640.html

版权

我们知道如果使用position:absolute和position:fixed都会导致元素脱离文档流，由此就会产生相应的问题。举例如下：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

举例如下

即子元素将父元素撑了起来。

但是一旦子元素的position为fixed或者是absolute，那么它就会脱离文档流，这样的后果是父元素无法被撑开，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        .div1{
            background-color: red;
            padding:20px;
            position: relative;
        }
        .div2{
            position: absolute; // 添加position:absolute使其脱离文档流
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

解决方法1：在js中设置父元素高度等于子元素的高度。

解决方法2：给父元素强行设置高度。（对于宽度导致的类似问题就强行设置宽度）

转载于:https://www.cnblogs.com/quietxin/p/8918640.html

weixin_30298497

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position 脱离文档流导致的问题

我们知道如果使用position:absolute和position:fixed都会导致元素脱离文档流，由此就会产生相应的问题。举例如下：<!DOCTYPE html><html><head> <title>position</title> <style> .div1{...
复制链接

扫一扫