定位的特点

定位

1. 定位的由来，将盒子定在某一位置上，所以定位也是摆放盒子，按照定位的方式移动盒子

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

   定位模式：用于指定一个元素在文档中的定位方式

   定位模式他是通过css的position属性来设置的，值可以分为五个：static静态定位

   relative相对定位，absoulute 绝对定位，fixed固定定位，sticky 粘性定位

   边偏移：定位的盒子移动到最终位置。有top.bottom.left.right四个属性

   • 静态定位（了解）static

     是元素默认的定位方式，简单理解无定位的意思

     静态定位按照标准流特性摆放位置，它是没有偏移的

   • 相对定位 ：position:relative

     1.他是相对于子级原来的位置来移动的

     （移动位置的时候参照点是原来的位置）

     2.原来在标准流位置继续占有，后面的盒子依然

     以标准流方式对他（不脱离文档流，继续保留

     原来的位置）

   • 绝对定位 ： positive:absolut

     1.如果没有祖先元素或者祖先元素没有定位

     择以浏览器为准定位

     2.如果这个父元素有定位（相对.绝对.固定）

     则以最近一级的有定位的祖先元素为参考点移动位置

     3.不占有原来的位置（脱离文档流，不保留原来位置）

相对定位和绝对定位倒是有什么使用场景

子绝夫相：子级使用绝对定位，父级则需要使用相对定位

子绝：子级用绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，

不会影响盒子里的其他兄弟

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

总结：因为父级需要占有位置，因此是相对定位，

子盒子不需要占有位置，则使用绝对定位

子绝父相不是永远不变的，也可以子绝父绝，子绝父固，子绝父粘

• 固定定位：positive:fixed

  固定定位使用场景：可以在浏览器页面滚动时

  元素的位置不会改变

  特点1.以浏览器的可视窗口为参照点移动元素。跟父元素

  没有任何关系，不随滚动条滚动

  特点2.固定定位不占有原先位置（脱离文档流）

• 粘性定位：positive:sticky

  特点1.以浏览器的可视窗口为参照点移动元素（固定定位）

  特点2.占有原先的位置不脱离文档流（相对定位）

  特点3.必须添加top.left.bottom.right.其中一个才有效果