css——z-index与position 相对定位、绝对定位、固定定位

z-index:
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
注释:元素可拥有负的 z-index 属性值
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)
若父元素设置了z-index,则子元素从父,且子元素z-index失效

1、相对定位(不脱离标准流,相对于原来标准流的位置定位)
区分块级和行内元素(行内无法移动)

{
position:relative;
top:;
bottom:;
left:;
right:;
}

添加margin、padding等是相对原来位置计算的 影响标准流布局
应用:1、对元素微调 2、配合子绝父相

2、绝对定位(脱离标准流,若祖先有定位流(fixed、relative、absolute)则相对于祖先,否则相对于body)
不区分块级和行内元素

{
position:absolute;
top:;
bottom:;
left:;
right:;
}

子绝父相:祖先元素relative,子元素absolute
水平居中方法:

{
left:59%;
margin-left:-wpx; //w为居中元素宽度的一半
}

3、固定定位(随滚动条 脱离标准流,不区分块级和行内)

{
position:fixed;
top:;
bottom:;
left:;
right:;
}

猜你喜欢

转载自blog.csdn.net/lucky541788/article/details/81627986
今日推荐