21.HTML 浮動、定位和顯示屬性

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。

浮動（Float）

浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

文字環繞圖片。
創建水平導航欄。
無網格系統時的列布局。

注意事項

清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴展以包含浮動的子元素，可以通過清除浮動或使用其他技術（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據空間，可能導致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對于視口進行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

塊級元素（Block）：display: block;使元素表現為塊級，占據新的行。

.block-element {
  display: block;
}

內聯元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內聯塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創建了一個彈性容器，其子元素可以靈活地在容器內排列。

.flex-container {
  display: flex;
}

網格（Grid）：display: grid;創建了一個網格容器，可以定義行和列以及在網格內放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區別在于后者仍保留元素占據的空間。
display: flex;和display: grid;為現代布局提供了更多控制，通常比浮動和定位更優。

示例

HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結語

浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的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>

運行結果：

移動前

移動后

比如我們經常看到的網頁右下角顯示的“返回到頂部”，就可以用固定定位來實現。

<!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

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

用CSS有普通流、絕對定位和浮動三種基本的定位機制，如果不是專門指定區塊的位置都是在普通流中定位，即從上到下一個接一個地排列，位置

由元素在HTML中的位置決定。

靜態定位：

文檔中默認都是靜態定位

相對定位：

使用相對定位的盒子的位置常以標準流的排版方式為基礎, 然后使盒子相對于它在原本的標準位置偏移指定的距離。

相對定位的盒子仍在標準流中, 它后面的盒子仍以標準流方式對待它。

使用relative, 即相對定位, 除了將position屬性設置為relative之外, 還需要指定一定的偏移量，

水平方向通過left或者right屬性來指定, 垂直方向通過top和bottom來指定。

使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達新的位置。而該相對定位的盒子則仍然位于標準流中，它對父塊沒有任何影響。

使用相對定位的盒子不僅對父塊沒有任何影響，對兄弟盒子也沒有任何影響。

簡單理解：

它是相對于"原來的自己"進行定位, 相對定位元素它還占用空間, 它的層次會比普通元素要高

相對定位屬性它一般都是用于配合絕對定位來使用

相對定位有坑, 所以一般不用于做"壓蓋"效果。頁面中, 效果極小。就兩個作用：

1) 微調元素

2) 做絕對定位的參考，子絕父相(配合絕對定位一起使用)

相關屬性

可以用left、right來描述盒子右、左的移動；

可以用top、bottom來描述盒子的下、上的移動。

絕對定位：

用絕對定位的盒子以它的"最近"的一個"已經定位"的"祖先元素"為基準進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基準進行定位。

再有，絕對定位的框從標準流中脫離，這意味著它們對其后的兄弟盒子的定位沒有任何影響，其他的盒子就好像這個盒子不存在一樣。

簡單理解:

絕對定位元素它是相對于"祖先"定位元素(relative、fixed、absolute)，如果絕對定位元素它的祖先沒有定位元素(static)那么它會以當前的瀏覽器窗口來進行定位,

絕對定位元素不再占用空間

固定定位：

當position的屬性值為fixed，即固定定位。它與絕對定位有些類似,區別主要在于定位的基準不是祖先，而是瀏覽器窗口或其它顯示設備窗口。

也就是當訪問者拖動瀏覽器的窗口滾動條時，固定定位的元素相對于瀏覽器窗口的位置保持不變。(IE6不支持固定定位)

簡單理解：它是以瀏覽器窗口作為參照標準來進行定位, 固定定位元素它不再占用空間

定位問題：

絕對定位問題：

當我們給一個子元素設置絕對定位,讓它在父元素的右下角顯示，這個時候

如果父元素的寬和高都為奇數,那么在IE6下我們沒有方法讓這個子元素壓住邊框的

這個時候我們建議大家不要使用奇數作為長度

相對定位問題；

IE6下,它認為我們的父元素一定包住它里面的子元素,所以當子元素的寬度和高度大于父元素時,在IE下父元素就會被撐開,

這個時候我們想解決這個問題,我們可以給父元素設置overflow:hidden,但是此時IE6還是不起作用,

所以我們解決方法就是給子元素和父元素都設置相對定位

固定定位的問題：

當我們給一個固定定位的子元素(子元素position:fixed)的父元素添加相對定位或者絕對定位的時候,

它是不會跟著父元素移動的,仍然是相對屏幕的。

實例:導航條

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>導航條</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
ul,li{
    list-style:none;
}
.box{
    width:800px;
    height:30px;
    margin:100px auto;
}
li{
    float:left;
    width:180px;
    text-align: center;
    line-height:28px;
    border:1px solid red;
    margin-left:-1px;
}
li:hover{
    border:1px solid green;
    position:relative; /* 解決邊框被壓住問題 解釋:后面的li壓住前面一個li,使用相對定位后,提高了li顯示高度 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>HTML+CSS</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ul>
</div>
</body>
</html>

讓層水平居中的方法：

讓左右邊界自動判斷之下，即可達成左右位置呈現居中的目的。

#content {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
<div id="content">層內容</div>

若內容區<div>之內還有其他內容<div>,其CSS屬性設置就需要加上"定位"position:absolute(或relative),以防firefox等其他瀏覽器出現錯誤

<div id="container">
<div id="content">
</div>
</div>
#container {
    background-image: url(images/3-2-1-bg.jpg);
    height: 400px;
    width: 800px;
    position: relative;
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
}
#content {
    margin: 75px;
    height: 210px;
    width: 610px;
    padding: 20px;
    border: 1px solid #FFF;
    position: absolute;
}

讓層垂直居中的方法：

在線咨詢

上一篇：史上最全的html5課程體系及評測標準
下一篇：為HTML頁面添加視頻、音頻的方法-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商

21.HTML 浮動、定位和顯示屬性

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

一、Static（靜態定位）

二、Fixed（固定定位）

三、Relative（相對定位）

四、Absolute（絕對定位）

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

靜態定位：

相對定位：

絕對定位：

固定定位：

您的項目需求