css定位

诗人远行

已于 2022-11-21 17:04:28 修改

阅读量686

点赞数

分类专栏： CSS 文章标签： css

于 2020-03-28 22:05:23 首次发布

本文链接：https://blog.csdn.net/qq_40340943/article/details/105168227

版权

21 篇文章 3 订阅

订阅专栏

1.position属性用于页面元素的定位，是很经常被使用的布局属性。

2.position属性有5种定位方式

（1）静态定位：static （默认行为）
（2）相对定位：relative（没有脱离文档流）
（3）绝对定位：absolute（脱离文档流）
（4）固定定位：fixed（脱离文档流）
（5）粘性定位：sticky

3.relative、absolute、fixed这三个定位方式有一个共同点，都是相对于某个基点的定位，但是三者的基点都不一样。

1.静态定位static不脱离文档流，元素处于原本的位置，可以说是元素的默认属性。

1.元素相对定位relative的基点是元素原本应该在的位置（即static定位时的位置）。

2.我们使用top ，right ，bottom ，left，来控制偏移的位置

3.注意，relative定位方式没有脱离文档流，

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;  //元素在原本的位置上向右移动30px,向下移动20px,
}

1.元素绝对定位absolute的基点是第一个非static定位的祖先元素或根元素。

2.同样我们使用top right bottom left 来控制偏移的位置。当没有设置这些值时，元素默认会被定位到元素没有脱离文档流时候的位置。

3.absolute定位的元素是脱离文档流的，我们使用z-index来控制层级，z-index的数值基于基点递增或递减。
在这里插入图片描述

4.由于层级的关系，被点位到同一位置的元素会产生覆盖的效果，是否产生覆盖的判断标准是基于基点来计算出全局的z-index，不能简单的使用当前用z-index大小来判断，举几个例子。

（1）当两个元素的基点相同，却被定位到同一位置，那么z-index高的会覆盖z-index低的。

（2）当一个绝对定位元素的z-index：100，其有一个绝对定位的子元素，基点为该父元素，那么即使其z-index：1也不会被父元素覆盖，因为基点的关系，从全局看该子元素的实际为z-index:101

（3）当一个绝对定位元素的z-index：-10，其有一个绝对定位的子元素，基点为该父元素，那么即使其z-index：5也不会显示出来，因为即使z-index：5，但是根据基点，实际处于的位置是z-index：-5

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;  //元素相对(父元素）向右移动30px,向下移动20px,
}

5.总之，把握两个关键点，基点 + 实际的z-index

1.元素固定定位fixed的基点是浏览器窗口，且元素是固定的不会移动。

2.同样我们使用top right bottom left 来控制偏移的位置。使用z-index来控制层级。

1.sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合

2.sticky生效的前提是，必须至少搭配top、bottom、left、right这四个属性其中一个一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

3.作用原理：当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky定位的元素距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。

#toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  position: sticky; /* 其他浏览器 */
  top: 20px;
}

1.有时候在开发的时候需要某个元素占满剩余元素，且要元素内容在超出大小的时候出现滚动条。

2.一种方法是通过计算使用calc(100% - xxpx)来声明高度，但这种方法需要明确需要减去多少像素，有时候是无法确定的。

3.这时候就可以使用绝对定位，不声明宽高，使用bottom,top等属性来撑满剩余屏幕高度即可。

关注