阅读 117

CSS定位、层叠上下文

一、div的分层

11.png

  • background是border外边沿包裹的区域

二、position

1.static

静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none,静态定位static,不要定位的时候用,现在比较少使用

选择器 { 
    position: static; 
}
复制代码

2.relative

相对定位是元素在移动位置的时候,是相对于它自己原来的位置来说的

选择器 { 
	position: relative; 
}
复制代码

2.1 应用场景

  • 用来做位移(现在很少用)
  • 用来给absolute元素做爸爸

2.2 特点

  • 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。

  • 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。

    因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

2.3 配合z-index

  • z-index:默认值为auto,不会创建新的层叠上下文
  • z-index:-1/-2/0/1/2 会创建新的层叠上下文

3.absolute

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的

绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的**(脱标)**

 选择器 { 
 	position: absolute; 
 }
复制代码

3.1 应用场景

  • 脱离原来的位置,另起一层,比如对话框的关闭按钮

  • 鼠标提示

tips:left 50% transformX(-50%):实现水平居中对齐
复制代码

3.2 特点

  • 如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位(Document 文档)

    如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置

3.3 配合z-index

4.fixed

固定定位是元素固定于浏览器可视区的位置

 选择器 { 
 	position: fixed; 
}
复制代码

4.1 应用场景

  • 浏览器的广告

  • 返回顶部按钮

4.2 特点

  • 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系;不随滚动条滚动。
  • 固定定位不在占有原先的位置
  • 手机上尽量不要使用,有很多坑

4.3 配合z-index

5.sticky

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

 选择器 { 
     position: sticky; 
     top: 10px; 
 }
复制代码

5.1特点

  • 以浏览器的可视窗口为参照点移动元素(固定定位特点)

  • 粘性定位占有原先的位置(相对定位特点)

  • 必须添加 top 、left、right、bottom 其中一个才有效

  • 跟页面滚动搭配使用。 兼容性较差,IE 不支持。

三、层叠上下文

定义:用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开,层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。

12.png

1、层叠上下文的创建

  • 文档根元素(<html>);
  • position值为 absolute(绝对定位)或 relative(相对定位)且 z-index值不为 auto 的元素;
  • position值为 fixed(固定定位)或 sticky(粘滞定位)的元素
  • flex 容器的子元素,且 z-index 值不为 auto
  • grid容器的子元素,且 z-index值不为 auto
  • opacity属性值小于 1 的元素
  • 以下任意属性值不为none的元素:
  • isolation 属性值为 isolate 的元素;
  • -webkit-overflow-scrolling 属性值为 touch 的元素;
  • will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素;
  • contain 属性值为 layoutpaint 或包含它们其中之一的合成值(比如 contain: strictcontain: content)的元素。

2、层叠上下文的顺序

  • 当具有明显的层叠水平标示的时候,如识别的z-index值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个

  • 当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

文章分类
前端
文章标签