position定位相对于float浮动更为灵活。如果用标准流或者浮动,实现会比较复杂或者难以实现的,可以通过定位的属性设置,将某个元素定位到指定的位置。
定位:position 主要包括定位模式和边偏移两部分。即定位需要和边偏移搭配使用
1.边偏移
2.定位模式
在css中,position属性用于定义元素的定位模式,基本语法格式如下:
position属性的常用值
当对多个元素同时设置定位时,定位元素之间有可能发生重叠。
所以,需要通过css的z-index属性来调整定位元素的堆叠顺序。
z-index默认值为auto,可以设置正整数,也可以设置为负整数。数字后面不能添加单位。
z-index取值越大,定位元素在层叠元素中越居上层;当取值相同时,根据书写顺序,后来者居上。
代码如下:
设置叠放次序前后对比:
注:元素添加了浮动、绝对与固定定位之后,元素模式会发生转换,转为行内块模式。