css 元素定位属性:position

利用元素的positon 可以对元素进行定位,常用取值有5个

static:默认值,静态定位(标准流布局)
relative:相对定位
absolute:绝对定位
fixed: 固定定位
sticky:粘性定位

在正式介绍position属性之前,先了解几个概念,方便更好的理解position属性的值.

视口

文档的可视区域,如下图红框所示,是肉眼能够看到的窗口.

画布

画布是用于渲染文档的区域,画布是用来渲染文档的所有内容的,内容的高度是可能会超过视口的范围的,超过的范围的画布是肉眼看不到的,文档内容超出视口范围,可以通过滚动查看. 如下图黑框所示

标准流

元素按照从左到右,从上到下顺序摆放好,互相之间不存在层叠现象的布局方式.

想多了解一点标准流的,请移步 :标准流详细教程链接

脱标的概念

脱标就是脱离标准流的布局,不再严格遵守从左到右,从上到下的去排布自己的位置的元素.

脱标又分为局部脱标和完全脱标,根据position的值的不同决定.

了解完这几个概念后,我们来看position 属性

认识元素的定位

定位允许您从正常的文档流布局中取元素 ,并使它具有不同的行为:

放在另一个元素的上面
始终保持在浏览器视窗内的同一位置 例如下图的红色框内的元素就是放在img元素的上面的情况

postition定位的取值

利用元素的positon 可以对元素进行定位,常用取值有5个

static:默认值,静态定位(标准流布局)
relative:相对定位
absolute:绝对定位
fixed: 固定定位
sticky:粘性定位

静态定位 static

static 是position 属性的默认值,也就是说即使你不设置一个元素position 属性,position属性也有一个值,就是static

设置static值的作用:

使元素按照标准流布局
left,right,top,bottom 没有任何作用.

相对定位-relative

元素会按照 标准流 布局
可以通过left,right,top,bottom 进行定位

定位 参照对象 是元素** 自己原来的位置**
left,right,top,bottom,用来设置元素的具体位置,对元素的作用如下图所示
相对定位的使用场景

在不影响其他元素定位的前提 下,对当前元素位置进行微调

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        background-color: aqua;
      }
      .span {
        position: relative;
        left: -20px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>span1</span>
      <span class="span">span2</span>
      <span>span3</span>
    </div>
  </body>
</html>

固定定位 - fixed

元素 脱离标准流(脱离标准流,脱标)
可以通过left,right,top,bottom 进行定位
定位参照对象是视口(viewport)
当画布滚动时,固定不动

绝对定位-absolute

元素脱离标准流 (脱标)
可以通过left,right,top,bottom 进行定位

定位参照对象是最邻近的定位祖先元素

如果找不到这样的祖先元素,参考对象是视口
什么是定位元素 position值不为 static 的元素也就是position 值为 relative,absolute,fixed 的元素

何谓子绝父相

在绝大多数情况下,子元素的绝对定位都是相对于父元素进行定位

如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案是:

父元素设置positon:relative(让父元素成为定位元素,而且父元素不脱离标准流)
子元素设置position:absolute
简称为 "子绝父相"

脱标元素的特点 (将positon 设置为absolute/fixed的元素)

可以随意设置宽高(即使这个元素本身是行内级非块级元素也可以(inline))
宽高默认由内容决定
不再受标准流的约束 不再严格按照从上到下,从左到右排布

不再严格区分块级(block),行内级(inline),行内块级(inline-block)的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局
绝对定位元素(absolutely positioned element) position 值为 absolute 或者 fixed的元素
对于绝对定位元素来说 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素实际占用宽度

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 决定定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性

left:0,right:0,top:0,bottom:0,margin:0
如果希望绝对定位元素在定位参考对象中居中显示,可以给绝对定位元素设置以下属性

left:0,right:0,top:0,bottom:0,margin:auto

另外,还得设置具体的宽高值(宽高小于定位参考对象的宽高)

auto 的使用总结

width:auto 1.行内非替换元素 -> width: 包裹内容的宽度 2.块级元素 -> width: 包含块的宽度 3.绝对定位元素 -> width:包裹内容的宽度

粘性定位-sticky

另外还有一个定位的值是 position:sticky ,比起其他定位要新一些.

strick 是一个大家期待已久的属性;
可以看做是相对定位和绝对定位的结合体
它允许被定位的元素表现的相对定位一样,直到它滚动到某个阀值点
当达到这个阀值点 时,就会变成固定(绝对)定位

sticky 是相对于最近的滚动祖先包含视口的滚动 详解链接:css3 增加的属性值position:stricky

position 值对比

css 属性 - z-index

z-index 属性用来设置定位元素 的 层叠顺序(仅对定位元素有效)

取值可以是正整数,负整数,0

比较原则

如果是兄弟关系

z-index 越大,层叠在越上面
z-index 相等,写在后面的那个元素层叠在上面

如果不是兄弟关系

各自从元素自己以及祖先元素中,找出最临近的2个定位元素进行比较
而且这2个定位元素必须设置有z-index 的具体数值