CSS定位屬性用CSS定位屬性精確控制你的網頁布局！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

有些時候

為了看到光明

你必須冒險闖入黑暗之中

- 2024.03.29 -

CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。

在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。

每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。

一、Static（靜態定位）

靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。

可以用于取消元素之前的定位設置。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 100px;
}
</style>
</head>
<body>

<div>這是一個靜態定位的元素。</div>

</body>
</html>

二、Fixed（固定定位）

固定定位使元素相對于瀏覽器窗口進行定位，即使頁面滾動，元素也會保持在固定的位置。

固定定位的元素會脫離正常的文檔流。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
/* 給整個頁面設置高度，出滾動條以便觀察 */
height: 5000px;
}
div{
width: 100px;
height: 100px;
background-color: blue;
/* 固定定位 */
position: fixed;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

運行結果：

移動前

移動后

比如我們經?？吹降木W頁右下角顯示的“返回到頂部”，就可以用固定定位來實現。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
position: relative;
}
.content {
/* 頁面內容樣式 */
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body style="height: 5000px;">
<div>
</div>
<button id="backToTop" onclick="scrollToTop()">返回頂部</button>
<script>
function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>
</body>
</html>

運行結果：

三、Relative（相對定位）

相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性top、bottom、left、right，使指定元素相對于其正常位置進行偏移。如果沒有定位偏移量，對元素本身沒有任何影響。

不使元素脫離文檔流，空間會保留，不影響其他布局。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:relative;/*相對定位*/
left:100px;/*向右偏移100px*/
top:-50px;/*向上偏移50px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

運行結果：

沒使用相對定位之前是這樣的：

使用相對定位后：相對于原來的位置向右偏移了100px，向上偏移50px。

雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。

四、Absolute（絕對定位）

絕對定位使元素相對于最近的非 static 定位祖先元素進行定位。如果沒有這樣的元素，則相對于初始包含塊（initial containing block）。絕對定位的元素會脫離正常的文檔流。

如果該元素為內聯元素，則會變成塊級元素，可直接設置其寬和高的值（讓內聯具備快特性）；
如果該元素為塊級元素，使其寬度根據內容決定。（讓塊具備內聯的特性）

<style>
.wrap{
width:500px;
height:400px;
border: 2px solid red;
}
.box1{
width:200px;
height:100px;
background:skyblue;
margin:10px;
}
.box2{
width:200px;
height:100px;
background:pink;
margin:10px;
position:absolute;/*絕對定位*/
left:100px;/*向右偏移100px*/
top:30px;/*向下偏移30px*/
}
.box3{
width:200px;
height:100px;
background:yellowgreen;
margin:10px;

}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

將第二個設置為絕對定位后，它脫離了文檔流可以定位到頁面的任何地方，在標準文檔流中的原有位置會空出來，所以第三個會排到第一個下面。

第二個相對于它的父元素向右偏移100，向下偏移30。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

五、z-index（層級順序的改變）

層疊順序決定了元素之間的堆疊順序。z-index 屬性用于設置元素的層疊順序。具有較高 z-index 值的元素會覆蓋具有較低 z-index 值的元素。

注意：

默認值是0
數值越大層越靠上
不帶單位
沒有最大值和最小值
可以給負數

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
}
div:nth-of-type(2){
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
}
div:nth-of-type(3){
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>

</body>
</html>

運行結果：

可以看到，最后一個div依然存在，但是看不見了，原因就是我們改變了z-index屬性值。

以上就是CSS定位屬性的介紹了，通過這些定位屬性，可以靈活地控制網頁中元素的位置和堆疊順序。

在實際應用中，CSS定位屬性的使用需要考慮到整體布局和用戶體驗。合理運用這些定位技巧，可以讓你的網頁不僅美觀，而且易于使用和維護。記住，好的設計總是細節和功能的完美結合。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

言

有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。

一、純 html 實現

1. 利用 id 為標記的錨點

這里作為錨點的標簽可以是任意元素。

  <a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標簽的 name 屬性作為錨點

這里作為錨點的標簽只能是 a 標簽。

  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <div id="abb">bbb</div>

注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。

二、 js 實現

1. 利用 scrollTo()

window.scrollTo 滾動到文檔中的某個坐標?？商峁┗瑒有Ч?，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計算該 DOM 節點到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

習布局前須知道 CSS 中的定位機制。

標準文檔流（Normal Flow）

浮動（Float）

絕對定位（Absolute Positioning)

標準文檔流：從上到下，從左到右的輸出文檔內容。它由塊級（block）元素和行級元素組成，且它們都是盒子模型。

布局是指瀏覽器將元素以正確的大小擺放在正確的位置上。

display：

設置元素的顯示方式

display:block

默認寬高為父元素寬高
可設置寬高
換行顯示
默認為block的元素：<div>, <p>, <h1> ~ <h6>, <ul>, <form>

display:inline

默認寬度為內容寬度
不可設置寬高
同行顯示（元素內部可換行）
默認為inline的元素：<span>, <a>, <label>, <cite>, <em>

display:inline-block

默認寬度為內容寬度
可設置寬高
同行顯示
整塊換行
默認為inline-block的元素：<input>, <textarea>, <select>, <button>

display:none

設置元素不顯示

display:none 與 visibility:hidden 的區別為 display:none 不顯示且不占位，但 visibility:hidden 不顯示但占位。

position

position 用于設置定位的方式與top right bottom left z-index 則用于設置參照物位置（必須配合定位一同使用）。

三種定位形式

靜態定位（static）
相對定位（relative）
絕對定位（absolute、fixed）

position: static | relative | absolute | fixed
/* 默認值為 static */

position:relative

相對定位的元素仍在文檔流之中，并按照文檔流中的順序進行排列。
參照物為元素本身的位置。

最常用的目的為改變元素層級和設置為絕對定位的參照物。

position:absolute

建立以包含塊為基準的定位，其隨即擁有偏移屬性和 z-index 屬性。

默認寬度為內容寬度
脫離文檔流
參照物為第一個定位祖先或根元素（<html> 元素）

position:fixed

默認寬度為內容寬度
脫離文檔流
參照物為視窗

NOTE：寬高的100%的參照依然為視窗（例：網頁遮罩效果）

top/right/bottom/left

其用于設置元素邊緣與參照物邊緣的距離，且設置的值可為負值。在同時設置相對方向時，元素將被拉伸。

z-index

其用于設置 Z 軸上得排序，默認值為 0 但可設置為負值。（如不做設置，則按照文檔流的順序排列。后面的元素將置于前面的元素之上）

z-index 棧

父類容器的 z-index 優于子類 z-index 如圖

float

CSS 中規定的定位機制，其可實現塊級元素同行顯示并存在于文檔流之中。浮動僅僅影響文檔流中下一個緊鄰的元素。

float: left | right | none | inherit

默認寬度為內容寬度
脫離文檔流（會被父元素邊界阻擋與position脫離文檔流的方式不同）
指的方向一直移動

float 元素在同一文檔流中，當同時進行 float 時它們會按照文檔流中的順序排列。(當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度)

注意：float 元素是半脫離文檔流的，對元素是脫離文檔流，但對于內容則是在文檔流之中的（既元素重疊但內容不重疊）。

clear

clear: both | left | right | none | inherit

應用于后續元素
應用于塊級元素（block）

使用方法：

優先級自上而下

clearfix 于父元素
浮動后續空白元素 .emptyDiv {clear: both}
為受到影響的元素設置 width: 100% overflow: hidden 也可
塊級元素可以使用 <br> 不建議使用，影響 HTML 結構

/* clearfix */
.clearfix:after {
 content: "."; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.clearfix {zoom: 1;} /* 針對 IE 不支持 :after */

flex

彈性布局可用于多行自適應，多列自適應，間距自適應和任意對齊。

創建 flex container

display: flex
/* 彈性容器內的均為彈性元素*/

flex item

只有彈性容器在文檔流中的子元素才屬于彈性元素。

<div style="display: flex;">
 <div>Block Element</div>
 <!-- flex item: YES-->
 <span>Inline Element</span>
 <!-- flex item: YES-->
 <div style="position:absolute;">Absolute Block Element</div>
 <!-- flex item: YES-->
</div>

flex 方向

flex-direction

<!-- 默認值為 row -->
flex-direction: row | row-reverse | column | column-reverse

flex-wrap

<!-- 默認值為 nowrap -->
flex-wrap: nowrap | wrap | wrap-reverse

flex-flow

flex-flow 為 flex-wrap 與 flex-direction 的簡寫，建議使用此屬性（避免同時使用兩個屬性來修改）。

flex-flow: <'flex-direction'> || <'flex-wrap'>

order

order 的值為相對的（同被設置和未被設置的值相比較），當均為設置時默認值為 0 則按照文檔流中的順序排列。

order: <integer>
<!-- 默認為 0 -->

flex 彈性

flex-basis

其用于設置 flex-item 的初始寬高（并作為彈性的基礎）。如果 flex-direction 是以 row 排列則設置寬，如以 column 排列則設置高。

flex-basis: main-size | <width>

flex-grow

伸展因子，其為彈性布局中最重要的元素之一，flex-grow 設置元素可用空余空間的比例。flex-container 先安裝寬度（flex-basis）進行布局，如果有空余空間就按照 flex-grow 中的比例進行分配。

Width/Height=flex-basis + flex-grow/sum(flow-grow) * remain

flex-grow: <number>
initial: 0
<!-- 默認值為 0 -->

flex-shrink

收縮因子，用于分配超出的負空間如何從可用空間中進行縮減。

flex-shrink: <number>
initial: 1
<!-- 默認值為 1 -->

Width/Height=flex-basis + flow-shrink/sum(flow-shrink) * remain

remain 為負值，既超出的區域。

flex

其為 flex-grow flex-shrink flex-basis 的值縮寫。

flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
initial: 0 1 main-size

flex 對齊

justify-content

其用于設置主軸（main-axis）上的對其方式。彈性元素根據主軸（橫向和縱向均可）定位所以不可使用 left 與 right 因為位置為相對的。（行為相似的屬性有 text-align）

justify-content: flex-start | flex-end | center | space-between | space-around
<!-- 默認值為 flex-start -->

align-items

其用于設置副軸（cross-axis）上的對其方式。（行為相似的屬性有 vertical-align）

align-items: flex-start | flex-end | center | baseline | stretch
<!-- 默認值為 stretch -->

align-self

其用于設置單個 flex-item 在 cross-axis 方向上的對其方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
<!-- 默認值為 auto -->

align-content

其用于設置 cross-axis 方向上的對其方式。

在線咨詢

上一篇：Chrome出品！網頁版免費涂鴉畫板！
下一篇：浪漫的星光閃爍文案短句

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS定位屬性用CSS定位屬性精確控制你的網頁布局！

一、Static（靜態定位）

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

五、z-index（層級順序的改變）

言

一、 純 html 實現

1. 利用 id 為標記的錨點

2. 利用 a 標簽的 name 屬性作為錨點

二、 js 實現

1. 利用 scrollTo()

2. 利用 scrollIntoView()

您的項目需求

CSS定位屬性用CSS定位屬性精確控制你的網頁布局！

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

一、純 html 實現