16 CSS中的定位

技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.为什么需要定位？

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

2.定位的组成

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

2.1定位模式

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

2.2 边偏移

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

3.相对定位static(了解)

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

  选择器 {
      position: static;
  }
  

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

4.相对定位relative(重要)

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

  选择器 {
      position: relative;
  }
  

相对定位原理解释.png

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

5.绝对定位absolute(重要)

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

  选择器 {
      position: absolute;
  }
  

没有祖先元素，绝对定位原理解释.png

祖先元素有定位，绝对定位原理解释.png

绝对定位不再占有原来的位置(脱标).png

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

6.子绝父相的由来

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

7.固定定位fixed(重要)

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

  选择器 {
      position: fixed;
  }
  

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

8.粘性定位sticky(了解)

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

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

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

9.定位总结

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

• 学习定位的重点是子绝父相；

  
  
  定位总结.png

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

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

  选择器 {
      z-index: 1;
  }
  

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

11.定位的拓展

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

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

2.定位的特殊特性

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

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

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

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

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

12.资料下载

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