18、定位屬性 · HTML+CSS學習筆記

定位就是通過有關定位的屬性來明確設定一個盒子的在以下兩個方面的位置： 1，在（x,y）平面上所處位置。 2，在高度（z軸）方向的位置（層次）。這是相對于一個盒子的“自然位置”和“浮動位置”而言的。自然位置就是所謂的正常的文檔流所確定的位置。浮動位置就是由于浮動的特性而確定的位置。 ## 18.1.1定位方式屬性position position用于設定一個元素的位置按什么方式來確定。通俗說就是設定元素“放在哪個位置”（可由4個定位屬性確定：top，left, right, bottom）。有如下4個值可用： static：靜態定位（其實就是沒有定位）是一個元素的默認定位方式，也就是一個文檔中元素的正常文檔流所確定的定位。對其給定定位位置（top，left, right, bottom）的值無效。 relative：相對定位相對于其本來應該所處的位置而設定一個相對性定位。需給定位置（top，left, right, bottom） absolute：絕對定位相對于其上層最近的一個非static定位元素而設定的一個絕對性定位。需給定位置（top，left, right, bottom）；而如果其所有上級都沒有非static定位元素，就相對于窗口來定位——手冊上說的相對于body，是不準確的！ fixed：固定定位相對于當前網頁窗口而設定的一個絕對性定位。需給定位置（top，left, right, bottom）。注意： 1，relative定位雖然會改變元素的位置，但不影響上級盒子和相鄰盒子該有的正常寬高和位置。 2，absolute定位和fixed定位的元素脫離了文檔流，也就是上級盒子中不會計算其寬高（像沒有一樣） ## 18.1.2.定位位置屬性：top，left，right，bottom 就是對于3種定位方式（relative， absolute， fixed），所給定的具體位置值。可以是使用距離“上”，“左”，“下”，“右”各多少來定。比如： ``` .cc1{ position: absolute; left: 5px; top: 10px; } ``` 注意：top和bottom不能同時用；left和right不能同時用！ ## 18.1.3.層疊屬性z-index 含義：就是將一個元素（盒子）默認情況下所展示在的那個平面（就是屏幕所在面）的垂直線當做z軸方向（就是眼睛盯屏幕時的那個“視線”方向），朝眼睛方向為z軸的正方向。則z-index可以設定一個元素（盒子）在z軸方向的“疊放層次”的高低，用整數表示。越大值表示越高，也就是離眼睛越近，自然就會覆蓋住比它低的其他盒子。如下圖所示： ![](https://img.kancloud.cn/d6/bf/d6bfc09370f48be9117757a4a18a657d_462x302.png) ``` <style> .box{ border:solid 1px red; width:300px; height:200px; position: relative; } .box .box1{ background: yellow; width:100px; height:100px; z-index:10; position: relative; left:10px; top:10px; } .box .box2{ background: blue; width:60px; height:50px; z-index:6; position: relative; } .box .box3{ background: green; width:80px; height:30px; z-index:3; position: relative; } </style> </head> <body> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> ```