定位

定位

定位组成：定位 = 定位模式+边偏移

定位模式 position：

定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

 

 

 

 

定位偏移量

偏移量

边偏移属性	示例	描述
top	top:80px	顶端偏移量，相对于父元素上边线距离
bottom	bottom:80px	底部偏移量，相对于父元素下边线距离
left	left:80px	左侧偏移量，相对于父元素左边线的距离
right	right:80px	右侧偏移量，相对于其父元素右边线距离

 

 

 

 

 

 

1. 静态定位

position: static;

静态定位按照标准流特性摆放位置，无偏移量

2.相对定位 （自恋定位）

position: relative

特点：

1. 总是参照自身原来的位置偏移；
2. 原来的位置还保留，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

3. 绝对定位

position: absolute;

特点：

1. 完全脱离文档流，不占位置（脱标）；
2. 如果没祖先元素或者祖先元素没有定位，则以浏览器为准；
3. 如果祖先元素有定位（相对，绝对，固定），则以近的为准；

子绝父相：相对定位经常用来作为绝对定位的父级

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

4.固定定位 fixed

position: fixed

特点：

1. 以浏览器可是窗口为准：1. 不以父元素为准；2.不随滚动条滚动
2. 固定定位不占有原先位置。固定定位可以看做是一种特定的绝对定位。

小技巧：固定版心右侧位置

1. left走浏览器宽度的一半：left:50%
2. 利用margin-left走版心的一半：margin-left:50%版心

5. 粘性定位 sticky

position: sticky

特点：兼容性差

1. 以浏览器可是窗口为参照
2. 占有原先位置
3. 必须添加偏移量才有效

定位总结

 

定位叠放次序  z-index

z-index: 1;

特点：

1. 数值可为正负，默认是auto，数值越大，盒子越靠上
2. 属性相同，则按照书写顺序后来居上
3. 数字后面不能加单位
4. 只有定位的盒子才有z-index属性

定位拓展

1. 绝对定位盒子居中：

无法通过 margin: 0 auto 实现居中，可通过调整偏移量实现：

{
    position:absolute;
    top:50%;
    margin-top: /* 负的盒子高度的一半*/

    left:50%;
    margin-left: /* 负的盒子宽度的一半*/
}

2.定位的特殊性：

1. 行内元素给绝对定位或固定定位之后，可以直接给定宽高；
2. 块级元素添加绝对定位或固定定位之后，如果不给宽高，默认是内容大小

3. 脱标盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位元素不会出现外边距合并问题）

4.绝对定位会完全压住盒子

浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

绝对定位会压住标准流所有内容。

浮动之所以不会压住文字，是因为浮动产生的目的是实现文字环绕效果。

小细节：

如果定位既有left又有right且冲突时，则会执行左，上下亦是如此。先左后右，先上后下