日本午夜一区二区三区,精品久久久一区二区,日韩在线观看精品网站免费

position 的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是css3新發布的一個屬性

一、static

static 是 position 的默認值，就是沒有定位，元素處于現在正常的文檔流中

二、relative

relative 是相對定位，指的是給元素設置相對于自己原本位置的定位，元素并不脫離文檔流，因此元素原本的位置會被保留，其他的元素位置不會受到影響

案例演示

html
復制代碼

<!DOCTYPE html> <html lang="en"> <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: 0px; padding: 0px; } .contAIner { width: 100%; height: 300px; } .content { width: 100px; height: 100px; } .content_yellow { background-color: yellow; } .content_red { background-color: red; } .content_black { background-color: black; } </style> </head> <body> <div class="container"> <div class="content_yellow content"></div> <div class="content_red content"></div> <div class="content_black content"></div> </div> </body> </html>

現在給紅色方塊設置上相對定位，相對于自身向右偏移50px，向下偏移50px

css
復制代碼
.content_red { background-color: red; position: relative; left: 50px; top: 50px; }

三、absolute

absolute 是絕對定位，是的指讓元素相對于 static 定位之外的第一個父元素進行定位，分為兩種情況

設置了 absolute 的元素如果存在有父元素設置了 position 屬性為 relative 或者absolute，此時該元素就以這些父元素來進行定位
如果沒有設置了 position 屬性為 relative 或者 absolute 父元素，則此時相對于 body 進行定位

absolute 是生成的絕對定位的元素，是會脫離了文本流的，即在文檔中已經不占據位置，常用于結合 relative 來使用

css
復制代碼

<div class="fu"> <div class="son"> 子元素 </div> </div> .fu { height: 500px; width: 500px; background-color: burlywood; position: relative; } .son { height: 100px; width: 100px; background-color: red; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }

四、fixed

fixed 是一種特殊的絕對定位，也會脫離文檔流，只不過 fixed 的元素是固定相對與 body 來定位的

五、sticky

sticky 是粘性定位，可以說是相對定位 relative 和固定定位 fixed 的結合體，一開始是沒有脫離文檔流的，但是當元素距離其父元素的距離達到 sticky 粘性定位的要求時 position:sticky 這時的效果相當于 fixed 定位，固定到適當位置，脫離了文檔流

html
復制代碼

<!DOCTYPE html> <html lang="en"> <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> /* 粘性定位 */ /* 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定值前被認為是相對定位，之后為固定定位 */ *{ padding: 0; margin: 0; } body{ height: 2000px; } div{ text-align: center; line-height: 40px; } .header{ height: 40px; width: 100%; background-color: yellow; position: fixed; top: 0; } .banner{ height: 80px; background-color: rosybrown; margin-top: 40px; } .nav{ height: 40px; background-color: royalblue; position: sticky; top:40px; } </style> </head> <body> <div class="header"> 頭部 </div> <div class="banner"> banner區域 </div> <div class="nav"> 導航欄 </div> </body> </html>