Loading

子绝父相布局

子绝父相布局经常使用，是一种比较经典的定位布局

  •  父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动 
  • 子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
<style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: rgb(189, 17, 17);
            position: absolute;
            left: 100px;
            bottom: 100px;
        }
    </style>

 
posted @ 2018-04-08 16:05  澎湃_L  阅读(565)  评论(0)  编辑  收藏  举报