3 week work—Position
阿新 • • 發佈：2018-09-22
org ref 沒有 type ble content src 視口 變化
各種定位之間存在一定的關聯，相對定位、絕對定位、固定定位、粘性定位。各種定位用於不同要求中，各有各的好處。相對定位的元素從文檔中的正常位置偏移給定量，但沒有偏移影響其他元素。 絕對定位的元素從流動中取出;
源代碼部分：
（1）httm部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="Google Chrome"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box1"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> </div> <div class="box2"> <div class="A">kyrie</div> <div class="B"></div> <div class="C"></div> </div> </body> </html> （2）CSS鏈接部分： *{ margin: 0; padding: 0; } .box1 div{ width: 150px; height: 150px; background-color: rgb(0,100,200); margin-right: 30px; display: block; text-align: center; font-size: 30px; line-height: 150px; } .two{ position: relative; left: 10px; top: 10px; } .box1 .three{ position: absolute; left: 100px; background-color:rgb(194, 173, 176); z-index: 77; opacity: .6; } .box2{ height: 400px; position: relative; } .A{ position: sticky; height: 100px; width: 100px; top: 100px; background-color: rgb(18, 18, 200); } .B{ position: sticky; height: 100px; width: 100px; top: 50px; opacity: .8; background-color: rgb(118, 219, 211); } .C{ position: sticky; height: 100px; width: 100px; top: 50px; opacity: .10; background-color: rgb(150,120,170); } body{ background-color:red; } 此次學習的Position（位置）是CSS中的一個確定位置的屬性。通過各種Position：relative、absolute、sticky、static等形式語法來控制位置的變化。其中static元素根據文檔的正常流程定位，是個默認值；而relative則元件根據文檔的正常流動定位，然後偏移top，right，bottom，和left。偏移量不會影響任何其他元素的位置; absolute元素將從普通文檔流中刪除，並且不會為頁面布局中的元素創建空間。sticky元件根據文檔的正常流動定位，然後偏移相對於它的最近的祖先滾動和包含塊（最接近的塊級祖先）。最後有一個fixed值元素將從普通文檔流中刪除，並且不會為頁面布局中的元素創建空間。它相對於所述初始位置包含塊通過所建立的視口。各種定位之間存在一定的關聯，相對定位、絕對定位、固定定位、粘性定位。各種定位用於不同要求中，各有各的好處。相對定位的元素從文檔中的正常位置偏移給定量，但沒有偏移影響其他元素。 絕對定位的元素從流動中取出;
static）定位。 固定定位類似於絕對定位，所不同的是該元素的包含塊是通過所建立的含初始塊視口中。 粘性定位可以被認為是相對定位和固定定位的混合。粘性定位的元素被視為相對定位，直到它超過指定的閾值，此時它被視為固定的，直到它到達其父母的邊界。
3 week work—Position