16CSS中的定位

1.为什么需要定位？

• 引入问题：一些情况使用标准流或浮动能实现吗？
  • 1.某个元素可以*的在一个盒子内移动位置，并且压住其他盒子。
    
  • 2.当我们滚动窗口的时候，盒子是固定在屏幕的某个位置。
    
• 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：
  • 浮动可以让多个盒子在一行没有缝隙的排列显示，经常用于横向排列的盒子。
  • 定位则是可以让盒子*的某个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。

2.定位的组成

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

2.1定位模式

• 定位模式决定了元素的定位方式，它通过CSS的position属性来设置，其值可以分为以下四个：
  

2.2 边偏移

• 边偏移就是定位的盒子移动到最终的位置。有top、bottom、left和right这4个属性。
  

3.相对定位static(了解)

• 静态定位是元素的默认定位方式，无定位的意思。
• 语法：

  选择器 {
      position: static;
  }
  

• 静态定位是按照标准流的特性来摆放位置，它没有边偏移；
• 静态定位在布局时很少使用；

4.相对定位relative(重要)

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

  选择器 {
      position: relative;
  }
  

• 相对定位的注意点：
  • 它是相对于自己原来的位置来移动的(移动位置的时候是参照点是自己原来的位置)。
  • 原来在标准流的位置会继续占有，后面的盒子仍然以标准流的方式来对待它。(不脱标，继续保留原来的位置)。
• 因此，相对定位并没有脱标。它典型的应用是给绝对定位当爹的。

5.绝对定位absolute(重要)

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

  选择器 {
      position: absolute;
  }
  

• 绝对定位的特点：
  • 如果没有祖先元素或祖先元素没有定位，则以浏览器为准进行定位(Document文档)。
  • 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级有定位的祖先元素为参考点进行移动位置。
  • 绝对定位不再占有原来的位置(脱标)。

6.子绝父相的由来

• 子绝父相的口诀是学习定位时必须记住的，它的意思是：子级元素是绝对定位的话，父级元素要用相对定位。
  
• 子级元素使用绝对定位，不会占有位置，可以放到父级盒子中的任何一个地方，不会影响其他的兄弟盒子。
• 父级盒子需要加定位来限制子级盒子在父盒子内的显示。
• 父级盒子布局时，需要占有位置，因此父级盒子只能是相对定位。
• 总结：因为父级盒子需要占有位置，因此是相对定位；子级盒子不需要占有位置，则是绝对定位。
• 子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也是会遇到的。

7.固定定位fixed(重要)

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

  选择器 {
      position: fixed;
  }
  

• 固定定位的特点：
  • 以浏览器的可视窗口为参考点一点元素。
    • 与父元素没有任何关系。
    • 不随滚动条滚动。
  • 固定定位不占有原先的位置。
    • 固定定位也是脱标的，其实固定定位也可以看成是一种特殊的绝对定位。
• 固定定位小技巧——固定到版心右侧
  • 小算法：
    • a.先让固定定位的盒子left: 50%，走到浏览器可视窗口的一半位置。
    • b.再让固定定位的盒子margin-left: 版心宽度的一半距离。多走版心宽度的一半为位置。

8.粘性定位sticky(了解)

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

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

• 粘性定位的特点：
  • 以浏览器的可视窗口为参照点移动元素(固定定位的特点)。
  • 粘性定位占有原先的位置(相对定位的特点)。
  • 必须添加top、left、right、bottom其中的一个才有效！
• 粘性定位与页面滚动搭配使用，兼容性较差，IE不支持!

9.定位总结

• 注意区分相对定位、固定定位、绝对定位的两大特点：1.是否占有位置(脱标否)；2.以谁为基准点进行移动；
• 学习定位的重点是子绝父相；
  

10.定位的叠放顺序z-index

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

  选择器 {
      z-index: 1;
  }
  

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
• 如果属性值相同，则按照书写顺序，后来者居上！
• 数字后面不能加单位！
• 只有定位的盒子才有z-index属性！

11.定位的拓展

1.绝对定位的盒子居中算法

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

2.定位的特殊特性

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

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

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

4.决定定位/相对定位会完全压住盒子

• 浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字、图片。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。
• 但是，绝对定位/固定定位会压住下面标准流中所有的内容！

12.资料下载

• 笔记及代码，欢迎star,follow,fork…