CSS定位位置属性示例

<>强位置属性:

一<>强,静态定位/常规定位/自然定位静态

<强>作用:使元素定位于自然流中

<强>特点:

<强> 1 强,忽略顶部,底部,左、右或者z - index声明

<强> 2 强,两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

<强> 3 强,具有固定宽度和高度值的元素,如果把左右外边距设置为汽车,则左右外边距会自动扩大到占满剩余宽度,造成的效果就是这个块水平居中

<强>二、相对定位相对

<强>作用:使元素成为可定位的祖先元素

<强>特点:

<强> 1 强,可以使用顶端/底/左/右/z - index进行相对定位,相对元素在自然流中的位置

<强> 2 强,相对定位的元素在自然流中的位置会被保留

<强> 3 强,任何元素都可以设置为相对的,它的绝对定位的后代都可以相对于它进行绝对定位

<强> 4 强,可以使浮动元素发生偏移(解决两个浮动元素设置t/r/b/l无效的问题),并控制它们的堆叠顺序

<强>三,绝对定位绝对

<强>作用:使元素脱离自然流

<强>特点:

<强> 1 强,脱离自然流

<强> 2 强,设置尺寸的百分比比的是最近可定位的祖先元素

<强> 3 强,lrtb如果设置为0,它将对齐到最近可定位祖先元素的各边(衍生水平垂直居中妙计)

<强> 4 强,如果没有最近可定位祖先元素,会认作为可定位祖先元素

<强> 5 强,z - index可以控制堆叠顺序

<强>四、固定定位固定

<强>作用:和绝对定位作用相似

<强>特点:

<强> 1 强,相对于浏览器视口定位

<强> 2 强,固定定位元素不会随着视口滚动而滚动

<强> 3 强,继承absolue的特点

<>强利用位置实现子元素垂直居中