从零开始的自学之路——position定位

     <div class="box1"></div>
     <div class="box2"></div>
     <div class="box3"></div>复制代码

• position开启定位,

1. 可选值: static 默认值,静态
2.  relative 生成相对定位
   
3. absolute 生成绝对定位
   
4. fixed 生成绝对定位

.box1{
         width: 100px;
         height: 100px;
         background-color: aqua;
     }复制代码

使用 postion:relative开启定位属性后的可选值:

left:相对原来的位置向左传递数值,则向右移动

right:相对原来的位置向右传递参数,向左移动

top:向上传递参数,向下移动

bottom:向下传递参数,向上移动

不设置偏移量不发生变化

相对定位不会脱离文档流 相对定位后,元素会提高一个层级 相对定位不会改变元素的性质

 .box2{
         width: 100px;
         height: 100px;
         background-color: rgb(129, 42, 90);
         position: relative;
         left:100px;
         top: 100px;
     }复制代码

使用 position:absolute开启绝对定位

left:相对原来的位置向左传递数值,则向右移动

right:相对原来的位置向右传递参数,向左移动

top:向上传递参数,向下移动

bottom:向下传递参数,向上移动

不设置偏移量元素位置不会改变

开启绝对定位后,脱离文档流相对于离他最近开启了定位的祖先元素而定位

如果没有祖先元素开启定位,则相对于浏览器窗口进行定位 绝对定位会提升元素层级

绝对定位会改变元素性质-------内联元素变块元素,块元素宽高默认被内容撑开

.box3{
         width: 100px;
         height: 100px;
         background-color: rgb(114, 107, 47);
     }复制代码

使用position:fixed开启固定定位

与绝对定位差别在于,只会相对于浏览器窗口进行定位

固定定位,固定位置,不会滚动 ie6不支持固定定位

                                            

转载于:https://juejin.im/post/5ce3f5f9e51d457753138121