碼上未來IT培訓(xùn)老師直接接聽

400-029-09** 400-029-0997 轉(zhuǎn) 36015
查看完整號碼
掃碼撥號
微信掃碼撥號

AI大模型全棧開發(fā)|前端基礎(chǔ)：CSS定位

2025/4/19 0:15:37

CSS定位課程前言Course Introduction同...

CSS定位

課程前言Course Introduction同學(xué)們，上節(jié)課我們學(xué)習(xí)了CSS浮動的相關(guān)知識，在今天的課程中，我們將深入學(xué)習(xí) CSS 定位的原理和應(yīng)用。逐步掌握如何通過定位實現(xiàn)靈活的頁面布局，精確控制元素的位置，以及調(diào)整元素的層疊效果。讓我們一起開啟這段充滿挑戰(zhàn)與樂趣的學(xué)習(xí)之旅吧！一定位

CodingFuture

1.1CSS 布局的三種機制

普通流：塊級元素獨占一行，從上到下排列。行內(nèi)元素從左到右排列，碰到邊緣換行。浮動：讓元素脫離普通流，實現(xiàn)水平排列。定位：將元素定位在瀏覽器的特定位置。1.2使用定位的原因

定位可以實現(xiàn)標準流或浮動無法快速實現(xiàn)的效果，例如：滾動窗口時，盒子固定在屏幕某個位置。盒子可以自由漂浮在其他盒子的上面。二定位組成部分

CodingFuture

2.1邊偏移

在CSS中，通過top、bottom、left和right屬性定義元素的邊偏移，通過邊偏移來移動定位的盒子的位置。邊偏移屬性示例描述toptop: 80px頂端偏移量，定義元素相對于其父元素上邊線的距離。bottombottom: 80px底部偏移量，定義元素相對于其父元素下邊線的距離。leftleft: 80px左側(cè)偏移量，定義元素相對于其父元素左邊線的距離。rightright: 80px右側(cè)偏移量，定義元素相對于其父元素右邊線的距離。定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

2.2定位模式（position）

在CSS中，通過position屬性定義元素的定位模式，語法如下：選擇器 { position: 屬性值; }2.3定位模式分類

定位模式是有不同分類的，在不同情況下，用不同的定位模式。值語義static靜態(tài)定位relative相對定位absolute定位fixed固定定位靜態(tài)定位(static)：默認定位方式，無定位。按照標準流特性擺放位置，沒有邊偏移。在布局中幾乎不用。相對定位(relative):盒子不脫離標準流，但可以相對于自身位置移動。特點：不脫標（不會影響其他元素的位置）。移動參考的起始點是盒子本身在標準流中的位置。會壓住標準流和浮動的元素。應(yīng)用場景：布局時作為外層容器。效果圖：

代碼示例：相對定位：微調(diào)元素位置，不脫標。

定位(absolute)：盒子完全脫離標準流，不占位置。特點：以帶有定位的父級元素為參照點移動。如果父級沒有定位，則以瀏覽器文檔為準。不保留原來的位置。應(yīng)用場景：需要精確控制子元素位置時。效果圖：父元素沒有定位

父元素有定位

定位口訣 —— 子絕父相子級使用定位時，父級需要使用相對定位。父級占位置，子級任意擺放。代碼示例：父級用relative，子級用absolute。

固定定位(?xed)：定位的特殊形式。特點：完全脫離標準流，不占位置。以瀏覽器可視窗口為參照點，不隨滾動條滾動。應(yīng)用場景：需要固定在屏幕上的元素，如導(dǎo)航欄。效果圖：

提示： IE 6 等低版本瀏覽器不支持固定定位。代碼示例：固定在瀏覽器窗口右上角。

三定位的擴展

CodingFuture

3.1定位的盒子居中

方法：left: 50%：讓盒子左側(cè)移動到父級元素的水平中心位置。margin-left: -寬度的一半：讓盒子向左移動自身寬度的一半。如圖：

代碼示例：

3.2堆疊順序（z-index）

在使用定位布局時，可能會出現(xiàn)盒子重疊的情況。加了定位的盒子，默認后來者居上，后面的盒子會壓住前面的盒子。應(yīng)用 z-index 層疊等級屬性可以調(diào)整盒子的堆疊順序。特性：值為正整數(shù)、負整數(shù)或 0，默認值為 0，數(shù)值越大，盒子越靠上。值相同時，按書寫順序，后來者居上。只能應(yīng)用于相對定位、定位和固定定位的元素。如圖：

3.3定位改變display屬性

定位和固定定位會將元素轉(zhuǎn)換為行內(nèi)塊。浮動、定位和固定定位的元素不會觸發(fā)垂直外邊距合并問題。四定位小節(jié)

CodingFuture

1.1CSS 布局的三種機制

定位模式是否脫標占有位置移動位置基準模式轉(zhuǎn)換使用情況靜態(tài)static不脫標，正常 模式正常模式不能幾乎不用相對定位 relative不脫標，占有 位置相對自身位置移 動不能基本單獨使用定位 absolute完全脫標，不 占有位置相對于定位父級 移動位置能要和定位父級元素 搭配使用固定定位 ?xed完全脫標，不 占有位置相對于瀏覽器移 動位置能單獨使用，不需要 父級注意事項：邊偏移需要和定位模式聯(lián)合使用，單獨使用無效。top 和 bottom 不要同時使用。left 和 right 不要同時使用。

結(jié)言陳詞Closing statement各位同學(xué)，今天的課程到這里就結(jié)束了！通過本次學(xué)習(xí)，我們?nèi)嬲莆樟?CSS 定位的核心知識和應(yīng)用技巧。從靜態(tài)定位到相對定位、定位和固定定位，我們了解了每種定位模式的特點和適用場景；從邊偏移屬性到堆疊順序，我們學(xué)會了如何精確控制元素的位置和層疊效果；從“子絕父相”的口訣到定位的盒子居中技巧，我們掌握了定位的實際應(yīng)用方法。定位不僅是 CSS 布局的基礎(chǔ)，更是實現(xiàn)復(fù)雜網(wǎng)頁效果的關(guān)鍵工具。希望大家在今后的開發(fā)實踐中，靈活運用今天所學(xué)的知識，設(shè)計出更加美觀、高效的網(wǎng)頁布局。同時，CSS 的學(xué)習(xí)是一個持續(xù)探索的過程，希望大家保持好奇心，不斷嘗試新的技術(shù)，提升自己的開發(fā)能力。下期課程預(yù)告：JavaScript基礎(chǔ)-表達式碼上未來為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細課程大綱

微信號:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨詢
夏老師 @大連碼上未來IT培訓(xùn)

資深職業(yè)咨詢規(guī)劃師

微信號：155******12

立即咨詢

“大連碼上未來IT培訓(xùn)”是碼上未來科技(大連)有限公司在教育寶平臺開設(shè)的店鋪，若該店鋪內(nèi)信息涉嫌虛假或違法，請點擊這里向教育寶反饋，我們將及時進行處理。

機構(gòu)評分

環(huán)境：5.0師資：5.0服務(wù)：5.0效果：5.0

公示信息

店鋪名稱：大連碼上未來IT培訓(xùn)

單位名稱：碼上未來科技(大連)有限公司

賬號名稱：mswl（158******92）

所屬城市：遼寧大連

入駐時長：6年

在線客服：在線聊

微信咨詢

返回頂部