css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）
這篇文章帶給大家的內容是關於css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
css中定位的基本概念很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。以下開始介紹如何使用css position屬性實現定位效果。
一：靜態定位（static）
元素依照其在HTML 中的位置順序決定排布的過程，預設定位，元素出現在正常的流中（忽略top, bottom, left, right 或z-index 聲明）。元素框正常產生。區塊級元素產生一個矩形框，作為文件流程的一部分，行內元素則會建立一個或多個行框，置於其父元素中。本元素需要設定position為static。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(静态定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.static {
position: static;
border: 3px solid #007AFF;
}
</style>
</head>
<body>
<div class="box">
<h2 id="position-nbsp-static">position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">
该元素使用了 position: static;
</div>
</div>
</body>
</html>下面是效果圖：
#二：相對定位（relative）
#相對定位被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動top,left,bottom,right都可以有值。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的頁面空間，可以設定z-index。使本元素相對於文檔流中的元素，或脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近使用者的視線。相對定位最大的作用是為了實現某個元素相對於本元素的左上角絕對定位，本元素需要設定position為relative。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(相对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
margin: 10px auto;
}
.box1{
background-color: red;
width:100px;
height:100px;
}
.box2{
background-color: yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background-color: blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box">
<h2 id="position-nbsp-relative">position: relative;</h2>
<div class="box1">正常位置的盒子</div>
<div class="box2">相对于其正常位置向左移动的盒子</div>
<div class="box3">相对于其正常位置向右移动的盒子</div>
</div>
</body>
</html>下面是效果圖：
相對定位元素經常被用來作為絕對定位元素的容器區塊。
三：絕對定位（absolute）
將被賦予絕對定位的元素從它在普通流中的位置中拖出，使用left、right、top 、bottom等屬性相對於其最接近的一個最有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定位屬性，則依據body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可由 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。
絕對定位的定位方法：如果它的父元素設定了除static之外的定位，例如position:relative或position:absolute及position:fixed，那麼它就會相對於它的父元素來定位，位置透過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文檔body來定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网-position元素(绝对定位)</title>
<style>
.box{
width: 300px;
overflow: hidden;
padding: 10px;
border: 1px solid #000;
}
.div1 {
width: 150px;
height: 150px;
background: yellow;
}
.div2 {
width: 150px;
height: 150px;
background: red;
top: 150px;
left: 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<h2 id="position-nbsp-absolute">position: absolute;</h2>
<div class="div1">
父元素
<div class="div2">子元素</div>
</div>
</div>
</body>
</html>下面是效果圖：
#四、固定定位（fixed）
#固定定位與絕對定位類似，但它是相對於瀏覽器視窗定位，並且不會隨著捲軸進行捲動。
固定定位的最常見的一種用途是在頁面中建立一個固定頭部、固定腳部或固定側邊欄，不需要使用margin、border、padding。本元素需要設定position為fixed。
那麼以上就是關於css使用position屬性達到定位效果的具體用法介紹，具有一定的參考價值，希望對有需要的朋友有所幫助！
以上是css如何使用position 屬性來實現定位效果？ css中的4種定位方法介紹（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
