小课堂【萌新】

【CSS】position定位有哪几种?各有什么特点?

分享人:汪胜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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.编码实战

demo

6.扩展思考

7.参考文献

w3school在线教程

菜鸟教程

8.更多讨论

鸣谢

感谢大家观看

By 汪胜