fixed定位的作用和用法详解

在进行网页制作时，为了使得布局更加完美，我们需要使用一些定位方式。其中，fixed定位是一种非常重要的定位方式，它可以将一个元素固定在窗口的某个位置，不随页面滚动而滚动。下面从多个方面对fixed定位做详细的阐述。

一、基本概念

fixed定位是CSS中一种非常重要的定位方式，它可以将一个元素固定在窗口的某个位置，不随页面滚动而滚动。fixed定位需要设置position属性为fixed。

  position: fixed;

固定定位的元素（称为“固定元素”）不会因为文档滚动而移动，它们会相对于浏览器窗口保持同样的位置。

二、fixed定位的应用

1. 在网页中添加导航栏

由于fixed定位可以保持元素固定在窗口的某个位置，因此非常适用于网页布局中添加导航栏。

  <nav class="fixed-nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品介绍</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>

  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    z-index: 9999;
  }

2. 设置悬浮广告

在网页上设置悬浮广告时，可以使用fixed定位实现广告始终在页面的某一侧显示。

  <div class="float-ad">
    <img src="ad.jpg" alt="悬浮广告" />
  </div>

  .float-ad {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

3. 固定页脚在页面底部

通过使用fixed定位，可以将一个元素固定在页面底部，例如常见的网页底部的版权信息或者联系方式。

  <footer class="fixed-footer">
    <p>©2021 All Rights Reserved</p>
  </footer>

  .fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
  }

三、fixed定位的缺点

虽然fixed定位在网页制作中有许多应用，但也存在一些缺点：

1. 页面高度无法自适应

由于fixed元素始终固定在窗口某个位置，会导致页面高度不自适应，因此需要设置高度和overflow属性。否则，当fixed元素高度大于窗口高度时，会导致fixed元素内容被遮挡。

2. 对于移动端兼容性不太好

在移动设备上使用fixed定位会出现一些问题。当fixed元素高度超过移动设备的屏幕高度时，内容可能会被截断。此外，fixed元素可能随着设备旋转而显示不全。为了解决这些问题，一般需要使用JavaScript对fixed元素进行特殊处理。

3. 对SEO不友好

由于固定定位的元素不随页面滚动而滚动，因此不会参与搜索引擎的抓取，对SEO不友好。

结语

虽然fixed定位存在一些缺点，但是在网页制作中，它仍然是一种非常重要的定位方式，可以帮助我们实现许多网页布局中的效果。