CSS定位問題（3）：相對定位，絕對定位

時間  2019-11-12
標籤 css 定位 問題 相對 絕對 欄目 CSS 简体版
原文   原文鏈接

引子：

開始的時候我想先要解決一個問題，怎麼設置一個div盒子撐滿整個屏幕？ css

看下面的html代碼： html

XHTML
1
2
3
4
5
<body>
     <div id = "father-body" >
         <div class = "item1" > </div>
     </div>
</body>

實現方法一： 瀏覽器

JavaScript
1
2
3
4
5
html , body , # father - body {
             height : 100 % ;
             width : 100 % ;
             background - color : # 123456 ;
         }

這裏主要解釋下%(百分號)在CSS中使用的問題。% 主要是在父級元素或者是祖先元素定義了固定的width 和height 的時候才能夠使用（或者說使用的時候纔會有效果）。 spa

實現方法二： htm

JavaScript
1
2
3
4
5
6
# father - body {
             position : fixed ;
             width : 100 % ;
             height : 100 % ;
             background - color : # 123456 ;
         }

這裏爲#father-body 設置position屬性，觸發自身的BFC。當對自身使用width 和 height的時候才能夠生效。 對象

position的fixed值的含義： 圖片

對象脫離常規流，使用 top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。 ip

position屬性的幾個值的概念：

1.相對定位

有了以上的定義，來看一段代碼： 文檔

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>

效果以下圖：
這裏寫圖片描述 it

當咱們使用top right bottom left 這樣的屬性的時候，CSS代碼以下：

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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.絕對定位

看下面的一段代碼：

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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設置絕對定位屬性

CSS
1
2
3
.item2 {
             position : absolute ;
         }

此時Box-2脫離文檔流，效果以下：

這個時候Box-3的位置會佔據以前Box-2的位置。且Box-2和Box-3的左邊框會重合。且盒子的寬度會根據盒子內部的元素自適應。

當盒子設置了絕對定位可是沒有使用top right bottom left設置盒子的偏移量的時候，它仍會佔據原先的位置。

那麼當設置top right bottom left這些屬性的時候會是什麼效果呢？

設置下面的代碼：

CSS
1
2
3
4
5
.item2 {
             position : absolute ;
             top : 0 ;
             right : 0 ;
         }

效果以下圖：

這裏寫圖片描述

那麼當咱們把直接父級元素設置爲已定位的元素會怎麼樣呢？

由上能夠得出兩個結論：

1.使用絕對定位的盒子以它的「最近」的一個「已經定位」的「祖先元素」爲基準進行偏移（定位）。若是沒有已經定位的祖先元素，那麼就會以瀏覽器窗口爲基準進行定位。
2.決對定位的框從標準流中脫離，這意味着它們對其後的兄弟盒子的定位沒有影響。其它的盒子好像就當這個盒子（絕對定位的盒子）不存在同樣。

3.z-index屬性

z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱同樣，若是頁面爲x-y軸，則垂直於頁面的方向爲z軸。z-index大的頁面位於其值小的的上面。

看下面的代碼：

CSS
1
2
3
4
5
6
7
8
9
10
.item1 {
             position : relative ;
             z-index : 3 ;
         }
         .item2 {
             position : absolute ;
             top : 0 ;
             right : 0 ;
             z-index : 1 ;
         }

常見定位拓展：

如下的代碼我都親測過，都可以達到效果，就不在展現效果圖（若是對代碼有疑問能夠留言）：

1.水平居中

1.1行內元素的水平居中
CSS
1
2
3
4
/*行內元素水平居中*/
         #body-div {
             text-align : center ;
         }
1.2塊級元素的水平居中
CSS
1
2
3
4
/*塊級元素水平居中*/
         #body-div {
             margin : 0 auto ;
         }
1.3多個塊級元素水平居中
CSS
1
2
3
4
5
6
7
/*多個塊級元素水平居中*/
         #body-div {
             text-align : center ;
         }
         ##body-div-container {
             display : inline-block ;
         }

2.水平垂直居中

2.1已知寬度高度的垂直水平居中
CSS
1
2
3
4
5
6
7
8
9
10
11
12
/*已知高度和寬度的水平垂直居中*/
         #body-div {
             position : relative ;
         }
         #body-div-container {
             width : 100px ;
             height : 100px ;
             position : absolute ;
             top : 50% ;
             left : 50% ;
             margin : -50px 0 0 -50px ;
         }
2.2未知寬度高度的垂直水平居中
CSS
1
2
3
4
5
6
7
8
9
10
11
12
/*未知高度和寬度的水平垂直居中*/
         #body-div {
             position : relative ;
         }
         ##body-div-container {
             position : absolute ;
             margin : auto ;
             top : 0 ;
             right : 0 ;
             bottom : 0 ;
             left : 0 ;
         }
2.3當被居中的元素是inline或者是inline-block
CSS
1
2
3
4
5
6
7
8
#body-div {
             display : table-cell ;
             text-align : center ;
             vertical-align : middle ;
         }
         ##body-div-container {
 
         }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程