css 详解Position，sticky定位的坑你知道吗？

PBitW
2,113 阅读8分钟

2024/1/27，最近菜鸟在制作公司官网的时候，用到了position的sticky用于粘贴定位，使用倒是没啥问题，就是感觉有些理解不是很对，所以特来重写该篇文章！

position

position 属性指定了元素的定位类型。

position 属性的五个值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

注意： 上述属性的取值又都可以对应上 top、bottom、left、right 这四个属性。元素都可以使用top、bottom、left、right等属性，然而这些属性无法工作，除非先设定position属性。他们也有不同的工作方式，这取决于定位方法。

在理解定位之前，需要先了解，文档流！

文档流

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。

这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

1、background-position

在这里插入图片描述

2、float

参考：css详解overflow / float，你知道float的半脱离文档流吗？

3、边距问题

在这里插入图片描述

什么是脱离文档流 ？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。

脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象（不脱离文档流）。

静态定位的元素不会受到 top, bottom, left, right 影响。

fixed 固定定位（相对浏览器窗口是固定位置）

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

注意：

  • Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持

  • Fixed定位使元素的位置与文档流无关，因此不占据空间

  • Fixed定位的元素和其他元素重叠

特殊情况不相对于视口

在这里插入图片描述

参考：position mdn

relative 相对定位（相对其正常位置）

移动相对定位元素，但它原本所占的空间不会改变（不脱离文档流）；相对定位元素经常被用来作为绝对定位元素的容器块。

注意

这里 relative 定位之后的元素虽然不脱离文档流，但是其会产生高度（及后面的定位高于前面的定位，见最下面z-index），例如：你前面的元素使用了 sticky ，那么后面的元素没定位属性时，滚动上去是会被覆盖的，但是给后面的元素加上 relative 后，就不会被覆盖了！

absolute 绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>。

absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。

sticky 粘性定位

sticky 英文字面意思是粘、粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

未滚动超出目标区域时，它的行为就像 position:relative; （当然是没有设置任何 bottom、left...的）； 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 它会固定在目标位置，表现为在跨越特定阈值前为相对定位，之后为固定定位。如果一开始元素位置就超出目标区域，则直接按position:fixed; 处理！

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

使用条件

1、父元素不能overflow:hidden或者overflow:auto属性，如果使用的ui组件设置了，就要设置成 overflow: visible; 将其覆盖！

2、必须指定top、bottom、left、right 的4个值之一，否则只会处于相对定位

3、父元素的高度不能低于sticky元素的高度，且sticky元素边界接触到相对的祖先元素后，会推动其一起运动！

4、sticky元素仅在其父元素内生效

问题

注意：

  1. 如果 position:sticky; 的元素为block且没有设置宽度，则left、right无效！如果为inline 则还是生效！
  2. 设置了，有时候移动到一定位置，也会失效！（注意：像我底下这样 [靠 white-space:nowrap; 使文本不换行，撑大body] 才会产生的bug；如果是直接设置body的宽度而产生的scroll则不会有该bug） -- 》 这里是因为上面的第三个问题引起的，因为不设置width则body宽度为窗口宽度，小于内容宽度

实例：

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">
    我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
</div>
<div class="sticky2">
    我是粘性定位
</div>
<div class="sticky4">
    我是粘性定位
</div>
<div class="sticky3">
    我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
</div>

<div style="padding-bottom:500px">
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
</div>

div.sticky {
    margin-left: 100px;
    display: inline;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    left: 10px;
    white-space: nowrap;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

div.sticky2 {
    margin-left: 100px;
    width: 200px;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

div.sticky4 {
    margin-left: 100px;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

div.sticky3 {
    margin-left: 100px;
    width: 1000px;
    margin-right: 100px;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
}

margin 会影响

上述 sticky3 在 body 设置了宽度（2000px，设置小一点也是会因为上面的第三个问题引起）生效后，在滚动到最右边时会被 margin 推走！和 sticky 一样的情况，只是 sticky 太长了，不好看出来，以为是失效！

只能作用于最外围外的父元素 或者 子元素的父元素是定位元素

今天在做vue的东西时，突然发现好多粘性定位不了，最后才发现

粘性定位只能作用于最外围外的父元素，如果是在子元素里面使用，则无法生效

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>

<div>
	<div class="sticky">我是粘性定位!</div>
</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

注意

Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。

代码运行地址：菜鸟教程

当然如果你在 子元素 的父元素上再设置一个定位，那么又可以生效了！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
.aa {
  position: relative;
  height: 200px;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="aa">
	<div class="sticky">我是粘性定位!</div>
</div>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
</body>
</html>

代码运行地址：菜鸟教程

如果子元素的父元素是定位元素

那么当后面的元素把整个 子元素的父元素 都覆盖的时候，也会把其顶上去！见代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
.aa {
	position: relative;
	height: 200px;
	background-color: red;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="aa">
	<div class="sticky">我是粘性定位!</div>
</div>
<div class="aa">
	<div class="sticky">我是粘性定位!</div>
</div>
<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
</body>
</html>

代码运行地址：菜鸟教程

重叠的元素（z-index）

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的上面。

注意：

  • 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最上面。

  • z-index仅在定位元素（position不等于static）中有效；这个属性是个“拼爹”的属性。(如果父元素层级低，那么子元素再怎么努力都没有用）

avatar
文章
阅读
粉丝