絕對定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box1{ 10 width: 200px; 11 height: 200px; 12 background-color: #bfa; 13 14 } 15 .box2{ 16 width: 200px; 17 height: 200px; 18 background-color: tomato; 19 /* 絕對定位 20 21 --當元素的position設置為absolute 22 -絕對定位的特點： 23 1、開啟絕對定位后，如果不設置偏移量，元素的位置不會發生變化 24 2、開啟絕對定位后，元素會從文檔流中脫離 25 3、絕對定位會改變元素的性質，行內變成塊，塊的寬高被內容撐開 26 4、絕對定位會使元素提升一個層級 27 5、絕對定位元素是相對於其包含塊進行定位的 28 29 包含塊(containing block) 30 -正常情況下： 31 包含塊就是離當前元素最近的祖先塊元素 32 -絕對定位的包含塊： 33 包含塊就是離他最近的開啟了定位的祖先元素 34 如果所有的祖先元素都沒有開啟定位 則根元素就是它的包含塊 35 -html(根元素、初始包含塊) 36 */ 37 position: absolute; 38 bottom: 0; 39 right: 0; 40 } 41 .box3{ 42 width: 200px; 43 height: 200px; 44 background-color: greenyellow; 45 46 } 47 .box4{ 48 width: 400px; 49 height: 400px; 50 background-color: rgb(47, 61, 255); 51 position: relative; 52 } 53 .box5{ 54 width: 300px; 55 height: 300px; 56 background-color: rgb(201, 14, 145); 57 /* position: relative; */ 58 59 } 60 </style> 61 </head> 62 <body> 63 <div class="box1">1</div> 64 <div class="box4"> 65 4 66 <div class="box5"> 67 5 68 <div class="box2">2</div> 69 </div> 70 </div> 71 72 <div class="box3">3</div> 73 </body> 74 </html>
絕對定位是對於包含塊而言的 其祖先元素應設置position：relative;
則會相對於對應已經設置position進行絕對定位，如果都沒設置則會對於body，最后相對於HTML，也就是說位於頁面的最左上角。
