关于对css中定位一些理解和总结思路,记录我的学习之路
了解定位之前,要理解标准文档流
- 标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
- 一般在HTML元素分为两种:块级元素和行内元素。像div,p这些的元素属于块级元素,块级元素是从上到下一行一行的排列。
- 默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列。
- 行内元素是在一行中水平布置,从前到后的排列;span,strong等属于行内元素。
- 定位中的absolute、fixed都让元素脱离文档流,就可以层叠
定位的属性(position)
定位主要分4种,熟练的使用能够对页面美化布局有着很好的帮助。
定位分为四种定位:
静态定位
相对定位
绝对定位
固定定位
position属性值有static、relative、absolute和fixed,其中relative和absolute两种定位方式是网页制作中经常使用的。
静态定位(static)
- position 默认的值,实际上在我的理解里好像没有什么作用,就是单单的默认词。
- 在页面布局是没有任何作用
- 属于标准流,不能偏移
没有定位,以标准文档流显示
相对定位(relative)
-
相对定位很好用,不能层叠
-
relative属性值
相对自身原来位置进行偏移
偏移设置:top、left、right、bottom
可以用left来描述盒子向右移动;
可以用right来描述盒子向左的移动;
可以用top来描述盒子向下的移动;
可以用bottom来描述盒子的向上的移动;
如果是负数就是相反的方向 -
相对定位的盒子,不脱离标准流,原有的位置保留不变,其后的元素不能占用其原有位置。
-
相对定位的主要用途是作为其内部元素绝对定位时的参照标准,有相对于我的含义。
效果图
绝对定位(absolute)
-
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。简单来说,就是要使用绝对定位的话,要去父级寻找定位,如果没有的话,他会往父级的父级的寻找定位,要是都没有定位,就会以浏览器窗口为参照物,一般使用绝对定位要是想以父级为参照物的话,父级没有定位就要给父级添加一个相对定位作为参照物。
-
绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。
-
在使用绝对定位时要想实现水平居中方法:
left: 50%;:让盒子的左侧移动到父级元素的水平中心位置;
margin-left: -100px;:让盒子向左移动自身宽度的一半。
定位的秘籍——子绝父相:子级绝对定位,父级相对定位
效果图
固定定位(fixed)
- 它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动,完全不占位置,脱离标准文档流,相对于浏览器定死在调边偏移属性的位置,和绝对定位比较相近
- 一般常用于固定头部导航栏,底部或者左右的侧边栏
说完定位了就要说一下z-index这个属性,和绝对定位经常配合的一个常用属性
调整元素定位时重叠层的上下位置:
- z-index属性值:整数,默认值为0
- 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系。
- z-index值大的层位于其值小的层上方
如图
z-index的应用
网页中的元素都含有两个堆叠层级,一个是未设置绝对定位时所处的环境,此时z-index是0;另一个是设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定。
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可。
总结
固定定位
- 参照物:浏览器窗口
- 固定定位后,元素会脱离文档流,变成行内块元素
- 不占位置
- 一定要设置坐标值
相对定位
- 参照物:元素本身
- 相对定位后,元素还占位置,不脱离文档流
绝对定位
- 参照物:会往父级逐个查找定位,如果父级都没有定位,就会以浏览器窗口为参照物
- 绝对定位后,元素脱离文档流,变成行内块元素