复习之CSS(三)——重要属性float、、position

float为浮动

加上float属性div等标签排版会从竖向排列改成横向排序

			float: left;/*左浮动*/
            float: right;/*右浮动*/
            float: none;/*不浮动*/
            float: inherit;/*继承父类浮动*/

clear清除浮动

 			clear: left;/* 元素左边不允许float浮动*/
            clear: both;/*全局不允许*/

position

position: relative; 相对上个元素 相对位置
position: absolute; 相对boy的原点相对位置
position:fixed; 脱离标准流 绝对位置 相对窗口原点位置 不与页面元素滚动改变位置
position:inherit; 继承父类元素
z-index:-1 层级

 .test1{
            width: 100px;
            height: 100px;
            background-color: #FF2F2F;
            position: relative;
            left: 0;
            top: 100px;
        }
        .test2{
            width: 100px;
            height: 100px;
            background-color: black;
            position: relative;
            left: 0;
            top: -50px;
        }
3
4

你可能感兴趣的:(前端)