css之定位position

一、概述

   HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。
   position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。
   top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；当position属性的值为absolute或fixed时，这些属性参照的是最近的具有定位属性的父元素进行调整。

二、position

position属性中的值

1. static：默认值，没有定位
2. relative：相对定位
3. absolute：绝对定位
4. fixed：固定定位

1、relative

相对定位：元素相对于其正常位置进行定位，可以通过top、right、bottom、left属性调整位置。

2、absolute

绝对定位：设置绝对定位后的元素将处于悬浮状态。
绝对定位的元素会触发浮动：悬浮，剩余元素将自动补齐浮动元素的位置。
绝对定位的top：0px left：0px 的坐标轴在上一级设置过元素的左上角，若没有则停留在浏览器左上角。

3、fixed

固定定位：固定定位的元素不会随着浏览器的滚动而改变位置，但会脱离标准文档流，产生悬浮

三、z-index属性

   在CSS中，z-index属性用于控制元素的堆叠顺序。它指定了一个元素在Z轴上的顺序，即元素在层叠元素堆里的垂直位置。
   当两个或多个元素重叠时，z-index属性决定了哪个元素会显示在顶部。默认情况下，元素的堆叠顺序由它们在HTML中的出现顺序决定。后出现的元素会覆盖先出现的元素。
   z-index属性的值可以是整数或auto。较高的值表示元素将显示在较低的值上面。
例如，如果一个元素A具有z-index值为2，而另一个元素B具有z-index值为1，那么元素A将显示在元素B上面。