CSS中的定位详解

CSS中的定位详解及扩展

定位分类

1. 静态定位（static）
2. 相对定位（relative）
3. 绝对定位（absolute）
4. 固定定位（fixed）
5. 粘性定位（sticky）
6. 定位的叠放次序（z-index）
7. 定位拓展

一、静态定位（static）

• 语法：

    选择器 { position: static; }
  

• 含义：静态定位按照标准流的特性摆放位置，没有列偏移（top,bottom,left,right）在布局时很少用到。

二、相对定位（relative）

• 语法：

    选择器 { position: relative; }
  

• 含义：采用相对定位后元素的位置以它的初始位置（原来的位置）作为参照物进行定位的。

• 注意：一个元素进行相对定位后它原来的位置还会保留，不会被其它的元素占用，所以它是不脱离标准流的。

三、绝对定位（absolute）

• 语法：

    选择器 { position: absolute; }
  

• 含义：采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素。

  1. 如果采用绝对定位的这个元素没有父元素，或者是父元素没有定位，那么这个绝对定位的元素会以浏览器（Document文档）为参照物进行定位。
  2. 如果父元素有定位（相对定位、绝对定位、固定定位，但不能是静态定位）则它会以最近一级的有定位的父元素作为参照元素移动位置。
  3. 注意最近一级的 ，有定位的 这两个条件，缺一不可，如果第一个父元素没有定位，则会找第二个父元素（前提是第二个父元素有定位，如果没有定位再往上一级找）作为参照位置。
     
     
     

• 绝对定位脱离了标准流，它不会占用原先的位置。

四、固定定位（fixed）

• 语法：

    选择器 { position: fixed; }
  

• 含义：固定定位是元素相对于浏览器可视窗口(浏览器的内容页面窗口)的位置来说的。

• 特点：

  1. 固定定位跟父元素没有任何关系。
  2. 固定定位的元素不会随着滚动条的滚动而滚动。
  3. 固定定位后，该元素不会占用原先的位置，脱离标准流。

• 固定定位的妙用：如何将一个盒子固定在版心的右侧（不管页面缩小放大，它一直在版心的右侧）。

  1. 先让固定定位的盒子left: 50% ,此时这个盒子的左边框会定位到浏览器/版心的中间。
  2. 再让固定定位的盒子向右走版心宽度的一半，即 margin-left: 版心宽度的一半; 此时固定定位盒子就会定位到版心的右侧了。
  3. 实现案例：网页中快速回到顶部的按钮。

五、粘性定位（sticky）

• 语法：

    选择器 { position: sticky; top: 5px; }
  

• 含义：粘性定位可以被认为是相对定位和固定定位的混合。

• 特点：

  1. 粘性定位以浏览器的可视窗口为参照点移动元素。
  2. 粘性定位的元素会占有原先的位置。
  3. 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。
  4. 粘性定位的兼容性差。
  5. 应用场景：顶部通栏的固定。

六、定位的叠放次序（z-index）

• 语法：

    选择器 { z-index: 1; }
  

• 在使用定位进行布局的时候，可能会出现盒子重叠的情况。此时可以使用z-index来控制盒子的叠放次序（从z轴方向来看的）。

• 数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上显示。

• 如果属性值相同，则按照书写顺序，现在后面的会压住前面的盒子。

• 注意：数字后面不能加单位。

• 只有定位的盒子才有z-index属性。

七、定位拓展：

1. 绝对定位的盒子居中：

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

2. 定位特殊特性:

   • 绝对定位（absolute）和固定定位（fixed）也和浮动类似。
     1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
     2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3. 脱离标准流的盒子不会触发外边距塌陷：

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

4. 绝对定位(固定定位）会完全压住盒子：

   • 浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，但是绝对定位（固定定位）会压住下面标准流所有的内容。
   • 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
     距合并的问题。