CSS position属性设置fixed定位相对于父元素详解

一、介绍CSS position属性

CSS position属性用于设置元素的定位方式，常用的有relative、absolute、fixed和static。其中，relative表示相对定位，absolute表示绝对定位，fixed表示固定定位，static表示静态定位。本篇文章主要介绍fixed定位的相关内容。

二、CSS position属性设置fixed定位的基础用法

固定定位（fixed）是相对于浏览器窗口进行定位的，不随滚动条的滚动而滚动。设置fixed定位，需要设置元素的position属性为fixed，同时设置top、left、right、bottom四个属性中至少一个，来控制元素的具体位置（如果不设置位置属性，元素将处于文档流中）。例如：

<style>
  #fixed-ele {
    position: fixed;
    top: 30px;
    right: 50px;
  }
</style>
<div id="fixed-ele">
  <p>这是一个使用fixed定位的元素</p>
</div>

上述代码中，设置了一个id为fixed-ele的div元素，并设置了其position属性为fixed，同时设置了top为30px，right为50px，使得这个div元素被固定在浏览器窗口的右上角。

三、CSS position属性设置fixed定位相对于父元素的用法

有时候我们需要将元素的fixed定位相对于其某个父元素进行定位，而非相对于整个浏览器窗口。此时，我们需要在父元素上设置position属性为relative，再在需要固定的元素上设置position属性为fixed。例如：

<style>
  #parent {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #eee;
  }
  #fixed-ele {
    position: fixed;
    top: 30px;
    left: 50px;
  }
</style>
<div id="parent">
  <div id="fixed-ele">
    <p>这是一个使用fixed定位相对于父元素的元素</p>
  </div>
</div>

上述代码中，我们设置了一个id为parent的div元素，将其position属性设置为relative，同时设置了其宽度为800px，高度为600px，背景色为#eee。在parent元素下，我们放置了一个id为fixed-ele的div元素，并且将其position属性设置为fixed，同时设置了top为30px，left为50px。这样的结果就是，fixed-ele元素被固定在了parent元素的左上角。

四、CSS position属性设置fixed定位相对于body的用法

有时候我们需要将元素的fixed定位相对于整个页面的body元素进行定位。此时，我们需要在body元素上设置position属性为relative（如已经有了父元素position属性为relative，那么body元素不需要设置）。例如：

<style>
  #fixed-ele {
    position: fixed;
    top: 30px;
    left: 50px;
  }
</style>
<body>
  <div id="fixed-ele">
    <p>这是一个使用fixed定位相对于body的元素</p>
  </div>
</body>

上述代码中，我们设置了一个唯一的id为fixed-ele的div元素，并将其position属性设置为fixed，同时设置了top为30px，left为50px。这样的结果就是，fixed-ele元素被固定在了整个页面的左上角。

五、CSS position属性设置fixed定位相对于兄弟元素的用法

在某些特定的场景中，我们需要将元素固定在其兄弟元素中，并相对于兄弟元素进行定位。这时候可以使用CSS position属性设置fixed定位相对于兄弟元素的方式。例如：

<style>
  #container {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #eee;
  }
  #fixed-ele {
    position: fixed;
    top: 30px;
    left: 50px;
  }
  #sibling-ele {
    position: relative; /* 兄弟元素 */
    width: 600px;
    height: 400px;
    margin: 20px;
  }
</style>
<div id="container">
  <div id="sibling-ele"></div>
  <div id="fixed-ele">
    <p>这是一个使用fixed定位相对于兄弟元素的元素</p>
  </div>
</div>

上述代码中，我们首先设置一个唯一的id为container的div元素，并将其position属性设置为relative，同时设置了其宽度为800px，高度为600px，背景色为#eee。在container元素下，放置了一个兄弟元素id为sibling-ele的div元素，并将其position属性设置为relative，同时设置了其宽度为600px，高度为400px，边距为20px。在sibling-ele元素下，我们放置了一个唯一的id为fixed-ele的div元素，并将其position属性设置为fixed，同时设置了top为30px，left为50px。这样的结果就是，fixed-ele元素被固定在了sibling-ele元素的左上角。

六、小结

本文主要介绍了CSS position属性设置fixed定位相对于父元素的相关内容。通过实际代码示例，我们可以清楚地理解如何使用position属性将元素进行定位，并且可以根据实际需求将元素相对于不同的父元素进行定位。在实际的前端开发中，position属性的灵活应用可以为我们的页面设计带来很大的便利性。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/302899.html