1.为什么需要定位?
1. 定位是可以让盒子自由的在某个盒子里移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。
2.语法
属性:positition
属性值:
1.relative=相对定位
特点:不脱标,占有原来的位置,相对于自己原来的位置进行移动,移动时参考的对象为原来的位置。
2.absolute=绝对定位
特点:脱离文档流,不占有原来的位置,移动时参考的对象为离自己最近的父元素,并且是设置了定位的父元素,如果祖级元素都没有设置定位,则参考浏览器为准。
3.fixed=固定定位
特点:脱标,不占有原来的位置,移动时参考的对象为可视浏览器的窗口,一直固定在设置的位置上,不随滚动条滚动。
4.sticky=粘性定位
特点:不脱标,占有原来的位置,以浏览器的可视窗口为参照点移动元素,必须添加 top bottom left right其中一个才生效。
2.子绝父相
1.因为父亲盒子需要占位所以绝对定位,子盒子不需要占位置所以相对定位,设置之后子盒子就可以在父盒子内随意移动到想要在的位置。
2.常见的使用方法。
3.定位叠放次序 z-index
1. 当我们设置了定位之后,肯定会出现层叠顺序上下的位置,这个时候就可以用z-index属性来设置元素在页面中的z轴。
语法:
选择器{
z-index:1;
}
2. 默认是auto,数值可以是正值,负值,0,数值越大盒子越靠上。
3. 如果设置了相同的属性,按照书写的顺寻,则后来者居上,不能加单位。
4. 只能设置了定位的盒子使用z-index属性。