整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次我們來說一下，HTML網頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現在網頁的各個位置，網頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學習一下。
position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素無法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。
我們說完了position，接下來我們就說說他是怎么進行定位的，我們有left，top，right，bottom，五個屬性分別對應 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。
我們來通過代碼和結果來看一下：
沒有定位的樣式
加了relative
加了relative的結果
上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]
我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。
加了absolute
加了absolute的結果
這個結果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對兔子圖片起作用，我沒有給貓添加任何樣式，貓圖片只是作為參照物。
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
有些時候
為了看到光明
你必須冒險闖入黑暗之中
- 2024.03.29 -
CSS定位屬性是用于控制網頁中元素位置的一種方式，它能夠讓元素在頁面上精準地落在我們想要的位置。
在CSS中，定位（Positioning）是控制元素在頁面上如何定位和顯示的一種機制。它主要包括四種屬性：靜態定位（static）、相對定位（relative）、絕對定位（absolute）、固定定位（fixed）。
每種定位方式都有其獨特的特點和使用場景，下面將分別介紹這幾種定位屬性。
靜態定位是元素的默認定位方式，元素按照正常的文檔流進行排列。在靜態定位狀態下，不能配合top、bottom、left、right來改變元素的位置。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<style>
.static {
background-color: lightblue;
padding: 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>
*{
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>運行結果：
相對定位是將元素對于它在標準流中的位置進行定位，通過設置邊移屬性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。
雖然它的位置發生了變化，但它在標準文檔流中的原位置依然保留。
絕對定位使元素相對于最近的非 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 值的元素。
注意：
代碼示例：
<!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
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
