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/zh-tw/n/302899.html