position定位有哪几种？各有什么特点？

1.背景介绍

2.知识剖析

position属性

1.static  默认值。没有定位，元素出现在正常的流中。

2.relative

生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

3.absolute

生成绝对定位的元素，相对于离该元素最近的父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

固定定位，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

浏览器支持：所有主流浏览器都支持 position 属性。

注意：在写定位的时候，left、top、right、bottom使用一个或两个就可以了，不要写三个或四个。

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

w3school在线教程

菜鸟教程

8.更多讨论

1.定位在什么情况下使用，应用场景是什么？                                                                        答：经常在布局的时候使用，通过定位改变元素的位置。

2.position如何实现垂直居中？

答：（1）.不知道自己高度和父容器高度的情况：

parentElement {

position:relative;

}

childElement {

position:absolute;

top:50%;

transform:translateY(-50%);

}

（2）.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

parentElement {

height:xxx;

}

.childElement {

position:relative;

top:50%;

transform:translateY(-50%);

}

（3）使用绝对定位要注意什么？

答：注意离该元素最近的父元素。                                                                                         通常，使用absolute时，离该元素最近的父元素要加上position：relative；如果不写，该元素会默认一个父元素进行定位。

ppt

视频