9day-定位、BFC形成原理

定位

在HTML+css的布局方式中，弹性布局、浮动布局、定位布局、流式布局，目前使用最多的是弹性布局，当页面中出现多个元素层叠状态时，就会使用到定位布局。

position: static | relative | absoulte | fixed | sticky

• static：默认值，静态定位（没有定位），元素出现在正常的文档流中；
• relative：相对定位
• absoulte：绝对定位
• fixed：固定定位
• sticky：粘性定位

绝对定位（absolute）

相对于元素定位属性不为静态定位的第一个父元素进行定位，可通过 left right top bottom进行位置调整；

绝对定位和浮动有些类似，都具有块状化、包裹性、破坏性等特点，但这两个属性不可以同时存在，当同时存在时，绝对定位会覆盖掉浮动属性。

基础语法

  position:absoulte;
  float:right; /*无效*/

块状化

元素一旦定义了定位属性，他的display计算则会变成block或者table。
例如为一段span元素进行绝对定位，这是span的宽高可以进行自定义了，就是因为元素的显示方式被绝对定位进行了覆盖改变。

包裹性

当元素定义了定位属性后，其宽度在不设定固定值时，会根据元素的内容进行自动调整。

包含块

就是元素用来计算和定位的一个框，例如。width：50%，也就是元素宽度的一半，那这个元素宽度，到底是哪个元素？
其实这个元素指的就是包含块。

小问题：普通元素的百分比宽度是相对于父元素的内容区计算还是盒子模型宽度？
答案：相对于内容区宽度计算。

• 根元素被称为初始包含块，其尺寸等同于浏览器可是窗口的大小；
• 如果元素定位属性为absoulte，则包含块由最近的position不为static 的祖先元素建立。

相对定位 relative

相对定位元素不会脱离文档流，他相对于自身原本所在位置进行定位，可通过left、right、top、bottom来控制元素的位置，效果类似于margin。

position:relative;

与margin的区别

• margin：可以实现位移，但会改拜年元素盒子模型的大小，继而影响其他兄弟元素的布局
• 相对定位：可以实现位移，但不会改变元素盒子模型的大小，不会影响其他兄弟元素的布局（但会覆盖在其他正常流元素的上面）

相对定位的另一个作用：作为绝对定位元素的爸爸。 子绝父相。

固定定位 fixed

相对于浏览器窗口进行定位的特殊定位，即使父元素存在relative或其他不为静态行为的属性值，都不能限制固定定位元素。原因在于他的包含块只有一个----根元素（html）。

position:fixed;

粘性定位 sticky

一种结合了相对定位和固定定位于一体的特殊定位方式。

设置粘性定位的元素默认情况下为相对定位，当他的位置超过指定阈值时，定位方式会切换为固定定位，直到父元素离开屏幕。

当元素设置粘性定位后，在屏幕视口范围内，该元素的位置不会收到定位阈值top、left、right、bottom的影响，当该元素的位置将要溢出或便宜视口范围时，定位方式会自动却换为fixed，然后再根据定位阈值计算新的固定位置。

粘性定位的特点

• 未达到指定阈值前，不会脱离文档流
• 当元素在容器内被滚动到超过指定的偏移值时，元素会在容器内固定到某个指定位置
• 粘性定位元素固定的偏移量时参照距离自己最近，且具有滚动属性的祖先元素，如果该祖先元素不可以滚动，则会相对于视口来计算偏移量。

z-index

可以为定位元素设定层叠级别。

定位元素默认的z-index的值为0；数字越大，级别越高，反之亦然。如果将z-index设为负值，那么层叠顺序会在正常流文档之后。如果等级相同时，后渲染的会覆盖前面先渲染的。

{
  z-index:99999;
}

BFC形成原理

BFC定义

官方定义：BFC（block formatting context）块格式化上下文，是web页面的可视css渲染的一部分，是块盒子的布局过程中发生的区域，也是浮动元素与其他元素交互的区域。

说人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。并且在BFC中计算元素的宽高方式不太一样。

BFC的触发条件

常用方式有以下几种：

• 浮动元素（元素的float不为none，指定float为left或right就可以创建BFC）
• 定位元素（元素的poition为absoulte或fixed）
• 根元素，HTML元素
• display：inline-block、flex、table-cell、table-caption、flow-root
• overflow：取值不为visible

BFC的特点

• 在BFC中，块级元素从顶端开始垂直地一个接一个的排列。
• 如果两个块级元素属于用一个BFC中，他们的上下外边距会发生重叠，以较大的为准。但是如果两个块级元素分别在不同的BFC中，他们的外边距则不会重叠。
• 计算BFC的高度时，浮动元素也参与计算。BFC可以包含浮动元素（利用这个特性可以清除浮动对父元素高度的影响）
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC的作用

• 解决块级元素上下外边距重叠问题：将两个块级元素放到不同的BFC容器中，即可。
• 解决浮动元素对父元素高度的影响。