position定位

定位

定位方向: left  | right  | top  | bottom

静态定位

position:static;  默认值,就是文档流。

绝对定位

Position:absolute;

特点:

★元素使用绝对定位之后不占据原来的位置(脱标)

★元素使用绝对定位,位置是从浏览器出发

★嵌套的盒子,父盒子没有使用定位,子盒子绝对定位,子盒子位置是从浏览器出发。

    嵌套的盒子,父盒子使用定位,子盒子绝对定位,子盒子位置是从父元素位置出发。

★给行内元素使用绝对定位之后,转换为行内块。(不推荐使用,推荐使用display:inline-block;

相对定位

Position: relative;

特点:

★使用相对定位,位置从自身出发

★还占据原来的位置

子绝父相(父元素相对定位,子元素绝对定位)

★行内元素使用相对定位不能转行内块

固定定位

Position:fixed;

特点:

★固定定位之后,不占据原来的位置(脱标)

★元素使用固定定位之后,位置从浏览器出发

★元素使用固定定位之后,会转化为行内块(不推荐,推荐使用display:inline-block;

猜你喜欢

转载自blog.csdn.net/VR_dancy/article/details/79824759
今日推荐