详解如何解决position:fixed固定定位偏移问题

下面将详细讲解如何解决position:fixed固定定位偏移问题的完整攻略。

问题描述

使用position: fixed可以使元素相对于浏览器窗口固定在某一位置，不随页面滚动而移动。但是，有时候会发现position: fixed定位的元素位置偏移了预期位置，出现了莫名其妙的位移情况。

这是由于使用position: fixed时，元素生成的"新层级"比其他元素更高，它会覆盖在其他元素上面。而当一个父元素使用了相对定位或者绝对定位时，它会对子元素产生影响，进而造成元素位置偏移的情况。

解决方法

解决方法有多种，下面介绍几种常见的方法。

方法一：使用transform属性

可以给fixed元素添加以下样式：

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

由于transform属性会创建一个"新层叠上下文"，使得fixed元素的层级与其父元素无关，并且不会影响其它元素的定位，从而避免出现偏移的情况。

方法二：添加一个中间层元素

为fixed元素的外层添加一个中间层元素，然后给这个中间层元素设置样式：

.container {
  position: relative;
}

.container::before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这样做可以让fixed元素脱离其父元素的影响，从而不会出现偏移的情况。

示例说明

下面举两个例子来说明上述解决方法。

示例一

HTML代码：

<div class="wrapper">
  <div class="header">
    <h1>这是一个头部</h1>
  </div>
  <div class="main-content">
    <p>这是一段内容</p>
    <a href="#">这是一个链接</a>
  </div>
  <div class="footer">
    <p>这是一个底部</p>
  </div>
  <div class="fixed-element">
    这是一个固定定位的元素
  </div>
</div>

CSS代码：

.wrapper {
  position: relative;
  height: 1000px;
}

.header {
  height: 100px;
  background-color: #aaa;
  border: 1px solid #000;
}

.main-content {
  height: 500px;
  background-color: #ddd;
  border: 1px solid #000;
}

.footer {
  height: 100px;
  background-color: #999;
  border: 1px solid #000;
}

.fixed-element {
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
}

使用以上代码，你可能会发现.fixed-element元素会随着页面的滚动而产生水平和垂直方向上的位移。

这时，我们可以使用第一种解决方法，为.fixed-element元素添加transform: translateZ(0)样式来解决这个问题：

.fixed-element {
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  transform: translateZ(0); /* 添加这一行代码 */
}

示例二

HTML代码：

<div class="wrapper">
  <div class="header">
    <h1>这是一个头部</h1>
  </div>
  <div class="content">
    <div class="inner-wrapper">
      <div class="fixed-element">
        这是一个固定定位的元素
      </div>
    </div>
    <p>这是一段内容</p>
    <a href="#">这是一个链接</a>
  </div>
  <div class="footer">
    <p>这是一个底部</p>
  </div>
</div>

CSS代码：

.wrapper {
  height: 1000px;
}

.header {
  height: 100px;
  background-color: #aaa;
  border: 1px solid #000;
}

.content {
  position: relative;
  height: 500px;
  background-color: #ddd;
  border: 1px solid #000;
}

.inner-wrapper {
  position: absolute;
  top: 50px;
  left: 50px;
}

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  z-index: 9999;
}

.footer {
  height: 100px;
  background-color: #999;
  border: 1px solid #000;
}

使用以上代码，你会发现.fixed-element元素会出现在底部，而不是我们预期的位置。

这时，我们可以使用第二种解决方法，为.content元素添加一个中间层元素，并使用position:fixed和z-index:-1样式来解决这个问题：

.content::before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fixed-element {
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  z-index: 9999;
}

这样，.fixed-element元素就可以顺利的位于我们预期的位置了。

以上就是解决position:fixed固定定位偏移问题的完整攻略。