position 当前位置: Home » 前端,css » position #### 1. 是什么 position属性规定元素的定位类型。任何元素都可以定位， 不论该元素本身是什么类型,绝对或固定元素会生成一个块级框， 相对定位元素会相对于它在正常流中的默认位置偏移。 #### 2. position属性有五个可选值: absolute、fixed、relative、static、inherit、sticky . ##### 2.1 static 默认值。没有定位，元素出现在正常的流中。 忽略 top, bottom, left, right 或者 z-index 声明。 ##### 2.2 absolute 生成**绝对定位**的元素. 相对的是向上第一个不是static默认定位的元素，如果没有找到，则相对于document 注：(document对象 -- 代表整个HTML 文档,可用来访问页面中的所有元素：)。 元素的位置通过left,top,right以及bottom属性进行规定。 ##### 代码演示 ``` .father { width: 300px; height: 200px; margin-left: 100px; margin-top: 100px; position: absolute; background: yellow; } .child { width: 100px; height: 100px; position: absolute; background: green; top: 50px; left:50px; } <div class="father"> <div class="child">child</div> </div> ``` 为了更好的显示效果，父元素具有外边距，此时可以发现子元素相对于父元素的左上角定位。效果如下： ![1.png][1] 当去掉父元素的position：absolute是，效果图如下，此时子元素相对于document进行定位。效果图如下： ![2.png][2] 为了验证此时absolute相对document定位,编写如下代码 ``` body{ height: 0px; } ``` 效果如下图所示： ![3.png][3] ##### 2.3 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位,不随滚动条滚动。 元素的位置通过left、top、right以及bottom属性进行规定。 ``` .father { width: 300px; height: 200px; margin-left: 100px; margin-top: 100px; position: absolute; background: yellow; } .child { width: 100px; height: 100px; position: fixed; background: green; top: 0px; <div class="father"> <div class="child">child</div> </div> ``` 效果如图所示： ![fixed.gif][4] ##### 2.4 relative 生成相对定位的元素，相对于其自身正常位置(这个位置是static的位置)进行定位。 例，如下面代码就是static状态下。 ``` .father { width: 300px; height: 200px; background: yellow; } .child { width: 100px; height: 100px; background: green; } <div class="father"> <div class="child">child</div> </div> ``` 效果如下图所示： ![12.png][5] 当child的css设置为relative时，会相对于原位置进行定位 ``` .child { width: 100px; height: 100px; position: relative; background: green; top: 50px; left:50px; } ``` 效果如下图所示 ![13.png][6] ##### 2.5 inherit 规定应该从父元素继承 position 属性的值。 ##### 2.6 sticky css3新属性，实验性的属性，不推荐使用。 [1]: http://sylblog.xin/usr/uploads/2019/07/983074357.png [2]: http://sylblog.xin/usr/uploads/2019/07/2458925221.png [3]: http://sylblog.xin/usr/uploads/2019/07/2002576197.png [4]: http://sylblog.xin/usr/uploads/2019/07/881031158.gif [5]: http://sylblog.xin/usr/uploads/2019/07/2266362671.png [6]: http://sylblog.xin/usr/uploads/2019/07/1870273791.png
Comments | NOTHING