css布局定位（position）

定位&＃xff1a;将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。
定位 &＃61; 定位模式 &＃43; 变偏移&＃xff08;通过top、bottom、left 、right设置&＃xff09;
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
一、静态定位&＃xff08;static&＃xff09;

1. HTML 元素默认情况下的定位方式为 static&＃xff08;静态&＃xff09;
2. 静态定位的元素不受 top、bottom、left 和 right
3. 属性的影响 始终根据页面的正常流进行定位
4. 示例1&＃xff1a;

// html 部分代码

// css部分代码.border2 div{border: 1px solid saddlebrown;background-color: antiquewhite;height: 50px;width: 50px;text-align: center;line-height: 50px;}


效果图&＃xff1a;

二、相对定位&＃xff08;relative&＃xff09;

1. 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。&＃xff08;参考位置为自身未定位时的位置&＃xff09;
2. 不会对其余内容进行调整来适应元素留下的任何空间。&＃xff08;不影响其它元素&＃xff09;
3. 示例2&＃xff1a; 在示例1的基础下添加代码&＃xff0c;使第一个div相对定位

.border2 div:first-child{position: relative;left: 30px;top:10px;}


三、固定定位&＃xff08;fixed&＃xff09;

1. 适用固定定位的元素是相对于视口定位的&＃xff08;即使滚动页面&＃xff0c;它也始终位于同一位置&＃xff09;
2. top、right、bottom 和 left 属性用于定位此元素。
3. 示例3&＃xff1a;

// html 部分代码

// css部分代码.divbox div:nth-child(1){border: 1px solid red;background-color: aquamarine;position: fixed;width: 100px;height:100px;right: 10px;bottom: 100px;}.divbox div:nth-child(2){border: 1px solid red;background-color: gold;height: 100vh;width: 100%;}


四、绝对定位&＃xff08;absolute&＃xff09;

1. position: absolute; 的元素相对于最近的定位祖先元素进行定位
2. 如果绝对定位的元素没有祖先&＃xff0c;它将使用文档主体&＃xff08;body&＃xff09;&＃xff0c;并随页面滚动一起移动。
3. 绝对定位后&＃xff0c;定位元素不占空间&＃xff08;正常流中忽略绝对定位元素&＃xff09;
4. 示例4&＃xff1a;在示例2的基础上添加代码&＃xff0c;让第三个div绝对定位

.border2 div:nth-child(3){position: absolute;left: 30px;top:10px;}


五、粘性定位&＃xff08;sticky&＃xff09;

1. position: sticky; 的元素根据用户的滚动位置进行定位。

2. 起先它会被相对定位&＃xff0c;直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置&＃xff08;比如 position:fixed&＃xff09;。

3. Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀&＃xff08;请参见下面的实例&＃xff09;。您还必须至少指定 top、right、bottom 或 left 之一&＃xff0c;以便粘性定位起作用。

4. 示例4&＃xff1a;

   div.sticky {position: -webkit-sticky; /* Safari */position: sticky;top: 0;background-color: green;border: 2px solid #4CAF50;}


在此例中&＃xff0c;在到达其滚动位置时&＃xff0c;sticky 元素将停留在页面顶部&＃xff08;top: 0&＃xff09;。
五、定位属性&＃xff08;top、bottom、left 和 right&＃xff09;的使用
一般情况下同一个元素使用top或bottom、left或right
六、定位属性z-index 的使用

1. 元素定位导致&＃xff0c;元素与元素重叠&＃xff0c;可使用z-index改变重叠顺序
2. z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
3. 取值范围&＃xff08;-2147483584 ~ 2147483584 &＃xff09;参考 CSS: z-index 取值范围
   七、定位属性clip 使用
   clip 属性剪裁绝对定位元素。rect (top, right, bottom, left)

img{position:absolute;clip:rect(0px,60px,200px,0px);}


参考 css定位:为什么需要定位