CSS position 相对定位和绝对定位

这几天老师发了一个压缩包的作业,简直被各种定位弄得头疼,所以好记性不如烂笔头,七秒的记忆伤不起啊!

position 的值有四个:static、relative、absolute、fixed


absolute和fixed统称为绝对定位

relative是相对定位

static 默认值(一般是不写的)

我感觉难理解的就是absolute与relative的区别

relative:相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局。定位是相对于自身位置定位,我一般为最外层容器设置relative定位。

absolute:元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位。(脱离后原来的位置相当于是空的,下面的元素会来占据位置。)它的定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的。

flxed 这个定位要不是朋友看我做的项目提醒我,我都没想起来,让我白敲了那么多代码。

position:fixed 相对于窗口的固定定位(在浏览器中,元素在文档滚动时不会在浏览器视察中移动)

 

 

 

原文地址:https://www.cnblogs.com/leitongtong/p/13749480.html