CSS---定位

文章目录

一、为什么需要定位

二、定位组成

三、 定位模式

四、边偏移

五、子绝父相

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

七、定位的总结

八、定位叠放次序z-index

一、 为什么需要定位

• 1、某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
• 2、当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

所以：

- 1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 - 2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

二、定位组成

• 定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
• 定位=定位模式+边偏移。
• 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

三、定位模式

四、边偏移

1、静态定位：默认定位方式，无定位的意思。

2、相对定位relative

• 相对定位是元素在移动位置的时候，相对于它原来的位置来说的。
  

3、绝对定位absolute

• 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
  

4、固定定位fixed

• 固定定位是元素固定于浏览器可视区的位置。
• 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
  

5、粘性定位sticky

• 粘性定位可以被认定是相对定位和固定定位的混合。
• Sticky粘性的
  

五、子绝父相

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

七、定位的总结

八、定位叠放次序z-index

• 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
  

绝对定位的盒子居中

• 加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
• 1、left：50%；让盒子的左侧移动到父级元素的水平中心位置。
• 2、margin-left：-100px（自身宽度的一半）；让盒子向左移动自身宽度的一半。

绝对定位和固定定位也和浮动类似。

- 1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。 - 2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

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

• 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子