HTML中的定位流

一、相对定位

css:position:relative;   top:xxpx;  right:xxpx;

注意点:1.相对定位不脱离标准流 2.同一方向只能有一个定位。3.区分行内块级元素。

二、绝对定位

css:position:absolute;   top:xxpx;  right:xxpx;

注意点:

1.脱离标准流。

2,不区分行内块级元素。

3.默认相对于body进行定位。

4.以首屏界面为参考点随着滚动条的滚动而滚动。

5.如果祖先元素为绝对定位,则以祖先元素为参考点。

6.是以最近的祖先元素设置的定位为参考点。

7.忽略父元素的padding。

三、子绝父相

子元素设置绝对定位,父元素设置相对定位

水平居中css:left:50%  margin-left:元素宽度的一半;

四、固定定位

css:position:fixed;   top:xxpx;  right:xxpx;

注意点:

1.脱离标准流。

2,不区分行内块级元素。

五、z-index

css:z-index:xx

注意点:

1.默认是0,

2.谁的值大谁在上面

3.父元素如果设置了,子元素设置的无效。

猜你喜欢

转载自www.cnblogs.com/chen-wei123/p/12595661.html
今日推荐