【從0到1學Web前端】CSS定位問題三(相對定位,絕對定位)
引子:
開始的時候我想先要解決一個問題,怎麼設定一個div盒子撐滿整個螢幕?
看下面的html程式碼:
<body>
<div id="father-body">
<div class="item1"></div>
</div>
</body>
實現方法一:
html, body,#father-body{
height:100%;
width:100%;
background-color:#123456;
}
這裡主要解釋下%
(百分號)在CSS中使用的問題。%
主要是在父級元素或者是祖先元素定義了固定的width
和height
的時候才可以使用(或者說使用的時候才會有效果)。
實現方法二:
#father-body{
position:fixed;
width:100%;
height:100%;
background-color:#123456;
}
這裡為#father-body
設定position屬性,觸發自身的BFC。當對自身使用width
和 height
的時候才可以生效。
position的fixed值的含義:
物件脫離常規流,使用
top
,right
,bottom
,left
等屬性以視窗為參考點進行定位,當出現滾動條時,物件不會隨著滾動。
position屬性的幾個值的概念:
1.相對定位
有了以上的定義,來看一段程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" >
.item1, .item2, .item3{
width:300px;
height:100px;
background-color:#123456;
margin:20px;
}
.item2{
position:relative;
/*top:40px;
left:40px;*/
margin:40px 0 0 40px;
}
</style>
</head>
<body>
<div>
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
效果如下圖:
當我們使用top
right
bottom
left
這樣的屬性的時候,CSS程式碼如下:
<style type="text/css">
.item1, .item2, .item3{
width:300px;
height:100px;
background-color:#123456;
margin:20px;
}
.item2{
position:relative;
top:40px;
left:40px;
/*margin:40px 0 0 40px;*/
}
</style>
可以看到的效果圖如下圖:
到這裡可以驗證當使用
top
right
bottom
left
(這四個屬性可以設定具體的畫素數也可以設定百分比)這樣屬性改變元素的位置的時候,不會影響其他元素的位置。而使用margin
這樣的屬性改變元素的位置會影響其他元素的位置。
示意圖如下(圖片來自W3CSchool):
2.絕對定位
看下面的一段程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin:20px;}
#body-div{
padding:15px;
background-color:#a0c8ff;
border:1px solid #000000;
}
#body-div div{
padding:10px;
background-color:#fff0ac;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="body-div">
<div class="item1">Box-1</div>
<div class="item2">Box-2</div>
<div class="item3">Box-3</div>
</div>
</body>
</html>
效果圖如下:
我們為Box-2設定絕對定位屬性
.item2{
position:absolute;
}
此時Box-2脫離文件流,效果如下:
這個時候Box-3的位置會佔據之前Box-2的位置。且Box-2和Box-3的左邊框會重合。且盒子的寬度會根據盒子內部的元素自適應。
當盒子設定了絕對定位但是沒有使用
top
right
bottom
left
設定盒子的偏移量的時候,它仍會佔據原先的位置。
那麼當設定top
right
bottom
left
這些屬性的時候會是什麼效果呢?
設定下面的程式碼:
.item2{
position:absolute;
top:0;
right:0;
}
效果如下圖:
那麼當我們把直接父級元素設定為已定位的元素會怎麼樣呢?
由上可以得出兩個結論:
1.使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行偏移(定位)。如果沒有已經定位的祖先元素,那麼就會以瀏覽器視窗為基準進行定位。
2.決對定位的框從標準流中脫離,這意味著它們對其後的兄弟盒子的定位沒有影響。其它的盒子好像就當這個盒子(絕對定位的盒子)不存在一樣。
3.z-index屬性
z-index屬性用於調整定位時重疊塊的上下位置,與它的名稱一樣,如果頁面為x-y軸,則垂直於頁面的方向為z軸。z-index大的頁面位於其值小的的上面。
看下面的程式碼:
.item1{
position:relative;
z-index:3;
}
.item2{
position:absolute;
top:0;
right:0;
z-index:1;
}
常見定位拓展:
以下的程式碼我都親測過,均可以達到效果,就不在展示效果圖(如果對程式碼有疑問可以留言):
1.水平居中
1.1行內元素的水平居中
/*行內元素水平居中*/
#body-div{
text-align:center;
}
1.2塊級元素的水平居中
/*塊級元素水平居中*/
#body-div{
margin:0 auto;
}
1.3多個塊級元素水平居中
/*多個塊級元素水平居中*/
#body-div{
text-align:center;
}
##body-div-container{
display:inline-block;
}
2.水平垂直居中
2.1已知寬度高度的垂直水平居中
/*已知高度和寬度的水平垂直居中*/
#body-div{
position:relative;
}
#body-div-container{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
2.2未知寬度高度的垂直水平居中
/*未知高度和寬度的水平垂直居中*/
#body-div{
position:relative;
}
##body-div-container{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
2.3當被居中的元素是inline
或者是inline-block
#body-div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
##body-div-container{
}