div清除绝对定位的影响

Posted 1500418882qqcom

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div清除绝对定位的影响相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float演练</title>
    <style>
        #div1 {
            border: 2px;
            background-color: deeppink;
            width: 800px;
            height: 600px;
            position: relative;
        }
        /*当元素绝对定位后，会脱离文档流，这时候用清除浮动的方式实现不用*/
        #div2 {
            border: 2px;
            background-color: sandybrown;
            width: 200px;
            height: 100px;
            position: absolute;
            left: 20px;
            top: 10px;
        }

        #div3 {
            border: 2px;
            background-color: darkred;
            width: 200px;
            height: 100px;
        }
         /*新建一个元素顶替因绝对定位失去的文档流，大小，高度都一样*/
         #padding {
            border: 2px;
            /*background-color: red;*/
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">div1
    <div id="div2">div2</div>
    <div id="padding" style="clear: both"></div>
    <div id="div3">div3</div>
</div>

</body>
</html>

　　

以上是关于div清除绝对定位的影响的主要内容，如果未能解决你的问题，请参考以下文章

一个 div 的 CSS 绝对定位受无关 div 中的边距影响

如何在不影响其兄弟位置的情况下将 div 绝对定位在弹性框中？ [复制]

清除浮动(带来的影响) clear与margin重叠

如何使绝对定位的元素响应？

css:为啥我用div来定位没起作用了，id没有错，只是完全没反应，请问可能的原因都有哪些

浮动float，定位position理解