4.前端CSS—定位
阿新 • • 發佈：2020-08-08
目錄
一、相對定位
相對於自身原來的定位進行定位，以左上角為基準。
.c1{
background-color: blue;
height: 100px;
width: 100px;
/*相對定位*/
position: relative;
top:100px; /*可以為負值*/
left: 100px;
/*right*/
/*bottom*/
}
top: 100px表示距離原來的上邊框100px，即自己向下移100px。
相對定位特點：
- 不脫離標準流
- 保留自己原來的位置
- 和浮動類似也會遮住其他標籤
二、絕對定位
.c1{ background-color: blue; height: 100px; width: 100px; /*絕對定位*/ position: abssolute; top:50px; /*可以為負值*/ left: 100px; /*right*/ /*bottom*/ }
絕對定位特點：
-
不保留自己原來的位置
-
按照父級標籤或者祖父級標籤，設定position為relative的標籤的位置進行移動，如果一直找不到設定了這個屬性的標籤，那麼按照body標籤來移動。
三、固定定位
根據瀏覽器視窗設定的定位,即不會隨著頁面的滾動而滾動。
設定固定定位用top描述，那麼是以瀏覽器的左上角設為參考點；如果用bottom描述那麼是以瀏覽器的左下角為參考點
.c4{
position: fixed;
left: 20px;
top: 20px;
}
四、z—index
應用：直接在主介面上彈出登入框
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .c1{ /*背景或字型顏色單獨的透明度*/ background-color: rgba(255, 0, 0, 0.3); height: 100px; width: 100px; } .c2{ background-color: rgb(255, 0, 0,); height: 100px; width: 100px; /*設定整個標籤透明度，*/ opacity: 0.3; } </style> </head> <body> <div class="c1"> 你好 </div> <div class="c2"> 你好 </div> </body> </html>