定位
认识定位
原理:定位的元素超出文档流
什么时候需要用到定位?
在同一块文档流的区域内,需要同时叠放多个标签
定位的流程:
1.通过 position 属性设置定位的参照物
2.通过 方位属性,设置具体方位的定位数据,方位属性有 top,left,right,bottom,他是用来设置距离参照物有多远
他们的优先级是 left>right
top>bottom
position 属性的值
static relative absolute fixed
static:静态定位,无参照物,不定位
relative:相对定位,以 元素本身没有移动之前的位置为参照物
absolute:绝对定位,以 当前元素的 第一个具有定位属性的祖先级元素 为 参照物,作为参照物的祖先级元素,必须具有
position: relative 或则 position: absolute 设置
如果没有定位的祖先级属性,则参照物是 body
fixed:固定定位,相对于浏览器窗口定位
定位的特点
相对定位的特点:
1.相对定位是基于元素原来的位置进行定位
2.元素设置了相对定位以后,对于元素本身没有任何影响
3.元素设置了相对定位以后,虽然元素脱离了文档流,但是元素本身的位置依然占据文档流的空间
4.相对定位的元素,天然的提升层级,比没有定位的元素层级高
5.相对定位的元素,可以通过 left top bottom right 改变元素的位置
绝对定位的特点:
1.设置了绝对定位的元素,会脱离文档流,不占据文档流空间,并且提升层级
2.行元素设置完绝对定位以后,可以设置宽高,可以设置上下padding和上下margin,如果不设置宽高,宽高由内容撑开
3.块元素设置了绝对定位以后,自动的margin消失,如果不设置宽高,宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位,如果不存在这样的祖先级元素,则相对于 document(文档)定位。具有定位属性的祖先级元素,一般需要有 relative和absolute其中的一个定位属性
5.一般的,如果设置了绝对定位,那么他的父元素需要有一个固定的高
固定定位的特点:
1.固定定为相对于浏览器窗口定位
2.固定定位脱离文档流
定位的层级
不做特殊设置的时候,
定位元素的层级 比非定位元素的层级高
定位元素后来者居上
使用z-index 设置定位的层级,如果设置该属性,则默认为 0
如果 z-index的值相同,则还是后加载的元素高于先加载的
如果值不相同,值大的元素层级高
透明度
transparent 透明色
opacity: 设置元素的透明度,可以使整个元素透明,包含元素里面所有的内容
取值范围 0-1,0完全透明 1完全不透明
行元素在垂直方向的对齐方式
vertical-aline
值:
top:顶部对齐
middle:中间对齐
baseline:基线对齐
bottom:底部对齐
vertical-aline 只能使用在行元素或者内联元素(inline-block)上,不能使用在块元素上
使用方式
1.如果父元素的高度由其中一个子元素撑开,那么给其他元素设置 vertical-aline: middle; 就可以实现居中效果
2.如果父元素高度固定,不是子元素撑开高度,则可以通过 添加一个自定义标签,该标签的高度为父元素的高度,然后设置 vertical-align: middle;和
display: inline-block;就可以使父元素的内容居中
vertical-align 也可以同来解决img标签的缝隙