關(guān)于html元素的css-定位

理解定位，首先要了解文檔流是什么。

文件流：指盒子按照html標(biāo)簽編寫的順序，從上到下，從左到右排列，塊元素占一行，從左到右排列，每一行元素在一行中從左到右排列，先寫的先，后寫的排在后面，每個(gè)盒子都占據(jù)自己的位置。

位置可以使方框脫離文檔流，就好比將元素分割成幾層，沒(méi)有位置的在一層，定位在沒(méi)有定位的上面一層。

你可以用Z-index設(shè)置等級(jí)，Z-index越大，顯示的就越向前。在創(chuàng)建網(wǎng)頁(yè)彈框時(shí)，通常將其設(shè)置為最大。

我們可以使用css的position屬性來(lái)設(shè)置元素的定位類型，postion的設(shè)置項(xiàng)如下：

relative生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置保留，元素本身相對(duì)自身原位置進(jìn)行偏移。

absolute生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來(lái)進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位。

fixed生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于瀏覽器窗口進(jìn)行定位。

static默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的定位</title>
    <style>
        .con1,.con2,.con3,.con4,.con5{
            border: 1px solid #000;
            margin: 10px;
            height: 400px;
        }
        /* 這個(gè)div屬于它下屬div的父元素，如果沒(méi)有設(shè)置浮動(dòng)，當(dāng)下屬div設(shè)置absolute時(shí)，相對(duì)于body偏移*/
        .con3{
            position: relative;  
        }
        .no_pos_1,.no_pos_2{
            height: 100px;
            width: 400px;
            margin :10px;
            font-size: 16px;
        }
        .no_pos_1{
            background-color: red;
        }
        .no_pos_2{
            background-color: gold;
        }

        .relative_1,.relative_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .relative_1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .relative_2{
            background-color: gold;
        }

        .absolute_1,.absolute_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .absolute_1{
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .absolute_2{
            background-color: gold;
        }
        .fixed_1,.fixed_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .fixed_1{
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -200px;  /* 設(shè)置水平垂直居中*/
            top: 50%;
            margin-top: -50px;
            z-index: 9999;   /*  彈框一般設(shè)置足夠大的值 */
        }
        
         /* 彈框效果 */ 
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;      /* 設(shè)置透明度 */
            z-index: 9998;   /* 一般比彈框設(shè)置的值小1*/
        }
        .fixed_2{
            background-color: gold;
        }
        .static_1{
            height: 100px;
            width: 400px;
            margin-top :10px;
            background-color: gold;
            position: static;
        }
</style>
</head>
<body>
    <div class="mask">

    </div>
    <div class="con1">
        <div class="no_pos_1">
            沒(méi)有使用定位
        </div>

        <div class="no_pos_2">
            沒(méi)有使用定位
        </div>
    </div>
    <div class="con2">
        <div class="relative_1">
            relative 生成相對(duì)定位元素，元素所占據(jù)的文檔流的位置保留，元素本身相對(duì)自身原位置進(jìn)行偏移
        </div>
        <div class="relative_2">
            
        </div>
    </div>
    <div class="con3">
        <div class="absolute_1">
            absolute 生成絕對(duì)定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于上一個(gè)設(shè)置了定位的父級(jí)元素來(lái)進(jìn)行定位，如果找不到，則相對(duì)于body元素進(jìn)行定位
        </div>
        <div class="absolute_2">
            
        </div>
    </div>
    <div class="con4">
        <div class="fixed_1">
            fixed 生成固定定位元素，元素脫離文檔流，不占據(jù)文檔流的位置，可以理解為漂浮在文檔流的上方，相對(duì)于瀏覽器窗口進(jìn)行定位。
        </div>
        
        <div class="fixed_2">

        </div>
    </div>
    <div class="con5">
        <div class="static_1">
            static 默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中，相當(dāng)于取消定位屬性或者不設(shè)置定位屬性。
        </div>
    </div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143復(fù)制代碼類型：[html]

制作一個(gè)彈框效果：

「鏈接」

、普通定位和相對(duì)定位

css中的元素有兩種元素，塊級(jí)元素和行級(jí)元素，塊級(jí)元素每定義一個(gè)，第二個(gè)會(huì)自動(dòng)換行，行級(jí)元素不會(huì)換行。如下圖定義了三個(gè)塊級(jí)元素div和兩個(gè)行級(jí)元素span。

普通定位就是從上到下從左到右依次排布的布局。

普通定位代碼

普通定位顯示效果

相對(duì)定位是在普通定位的基礎(chǔ)上作出一些變動(dòng)，如本來(lái)這個(gè)元素應(yīng)該在第二行的位置，設(shè)置position:relative,bottom:20px;他就會(huì)在原來(lái)普通定位中應(yīng)處于的位置的基礎(chǔ)上距離底部上浮20px;

他的位置浮動(dòng)會(huì)使他的位置變化，但是他原本處于的文檔空間不會(huì)改變。

比如相對(duì)定位使得本在第二行的元素div上浮了一行的高度，則他會(huì)和本來(lái)在第一行的元素疊加，但是他在第二行的位置還是會(huì)空在那里，下一個(gè)塊級(jí)元素會(huì)從第三行開(kāi)始布局。代碼和效果如圖

相對(duì)定位代碼

相對(duì)定位效果

二、絕對(duì)定位和fixed定位

這兩種定位都不占據(jù)文檔空間，所以如果是普通流的元素遇到這些定位的元素會(huì)產(chǎn)生疊加情況。浮動(dòng)元素也不占據(jù)文檔空間

絕對(duì)定位是相對(duì)最近一個(gè)已經(jīng)定位的祖先元素定位的，如果最近沒(méi)有定位的祖先元素，則根據(jù)根元素定位。可以用來(lái)做提示框或者下拉搜索框。

代碼和效果如圖

絕對(duì)定位代碼

絕對(duì)定位效果

上圖可以看出

1、第一個(gè)空白背景框的div的祖先元素td已經(jīng)使用了相對(duì)定位，雖然位置沒(méi)有便宜，但是他的絕對(duì)定位是在哪個(gè)td元素的基礎(chǔ)上進(jìn)行定位的。

2、666的定位也是絕對(duì)定位，但是他沒(méi)有已經(jīng)定位的祖先元素，所以他的絕對(duì)定位是相對(duì)于根元素定位的。

3、空白框元素雖然占了很大的空間，但是背景灰色并沒(méi)有鋪滿他所占的高度，這就是不占據(jù)文檔空間，反觀上面的普通定位和相對(duì)定位，都鋪滿了內(nèi)含元素的背景。

fixed元素就是固定在瀏覽器某個(gè)位置的元素，絕對(duì)定位是固定在頁(yè)面的，如果滾動(dòng)滾動(dòng)條的話絕對(duì)定位的元素也會(huì)滾上去，fixed元素不會(huì)。

通常用來(lái)寫導(dǎo)航條或者回到頂部等。代碼和效果如圖。

fixed定位代碼

fixed定位效果

三、浮動(dòng)定位

浮動(dòng)定位同樣不占據(jù)文檔空間，所以背景也不會(huì)鋪滿，下面例子中可以看出來(lái)。

浮動(dòng)定位代碼

浮動(dòng)定位效果

1、浮動(dòng)定位不占據(jù)空間

2、浮動(dòng)定位會(huì)從左到右(這是左浮動(dòng)，右浮動(dòng)相反)依次排布，如果行寬不夠則換行。換行的過(guò)程中如果左側(cè)依然有元素占據(jù)，如下面的框1，則234會(huì)依次占據(jù)右側(cè)空間。

SS中通常使用position 屬性，決定元素的定位方式。

常用的定位方式通常有

值	意義
relative	相對(duì)定位
absolute	絕對(duì)定位
fixed	固定定位

相對(duì)定位

position 設(shè)置為 relative。

相對(duì)定位是元素相對(duì)于自己原來(lái)的位置通過(guò)使用top、left 等屬性進(jìn)行移動(dòng)，使其顯示在新的位置上。

相對(duì)定位的元素雖然移動(dòng)了，但是之前的位置并沒(méi)有放棄，同時(shí)也不會(huì)搶占移動(dòng)后原有元素的位置(但會(huì)對(duì)原有位置的元素進(jìn)行壓蓋)。

相對(duì)定位通常用來(lái)微調(diào)元素位置；而且相對(duì)定位可以作為下面要講的絕對(duì)定位的參考坐標(biāo)。

屬性	值	作用
top	像素、百分比等	相對(duì)原來(lái)位置，距離上邊移動(dòng)距離，可以為負(fù)值
left	像素、百分比等	相對(duì)原來(lái)位置，距離左邊移動(dòng)距離，可以為負(fù)值
right	像素、百分比等	相對(duì)原來(lái)位置，距離右移動(dòng)距離，可以為負(fù)值
bottom	像素、百分比等	相對(duì)原來(lái)位置，距離下邊移動(dòng)距離，可以為負(fù)值。

相對(duì)定位舉例

像素描述位置

box2 開(kāi)啟了相對(duì)定位，在新的位置得到了渲染。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對(duì)定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

百分比形式

如果在相對(duì)定位中， top、left、bottom、right 寫成百分比的形式，表示他們?cè)诟溉萜鲀?nèi)所顯示的百分比位置。

舉例

父元素寬高均200px。開(kāi)啟子元素相對(duì)定位，則子元素位置如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相對(duì)定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

絕對(duì)定位

position 設(shè)置為 absolute。

絕對(duì)定位的元素在瀏覽器中擁有絕對(duì)位置，可以通過(guò)坐標(biāo)進(jìn)行描述。

絕對(duì)定位的元素脫離標(biāo)準(zhǔn)文檔流，釋放了自己本來(lái)應(yīng)該在的地方的位置；同時(shí)會(huì)在新的位置上對(duì)其他元素進(jìn)行壓蓋。

絕對(duì)定位的元素會(huì)在自己祖先元素中尋找擁有定位屬性的元素作為參考點(diǎn)。這個(gè)祖先元素通常是相對(duì)定位的。

絕對(duì)定位的元素如果找不到擁有定位屬性的祖先元素作為參考點(diǎn)，則相對(duì)于 IBC（初始包含塊，可以認(rèn)為是HTML根元素）定位。

屬性	值	作用
top	像素、百分比等	相對(duì)參考點(diǎn)位置，距離參考點(diǎn)上邊移動(dòng)距離，可以為負(fù)值
left	像素、百分比等	相對(duì)參考點(diǎn)位置，距離參考點(diǎn)左邊移動(dòng)距離，可以為負(fù)值
right	像素、百分比等	相對(duì)參考點(diǎn)位置，距離參考點(diǎn)右邊移動(dòng)距離，可以為負(fù)值
bottom	像素、百分比等	相對(duì)參考點(diǎn)位置，距離參考點(diǎn)下邊移動(dòng)舉例，可以為負(fù)值。

舉例

參考點(diǎn)IBC

參考點(diǎn)是IBC,此時(shí)的top、left、bottom、right都是通過(guò)HTML跟節(jié)點(diǎn)來(lái)描述元素的位置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>絕對(duì)定位釋放自己位置的示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

參考點(diǎn)是定位元素

最經(jīng)典的就是，父節(jié)點(diǎn)開(kāi)啟相對(duì)定位，子元素開(kāi)啟絕對(duì)定位；此時(shí)的top、left、bottom、right都是通過(guò)父元素的位置描述子元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子絕父相</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

固定定位

position 設(shè)置為 fixed。

不管頁(yè)面如何下拉，元素永遠(yuǎn)固定在一個(gè)位置。

固定定位只以頁(yè)面為參考點(diǎn)，并且同樣也脫離了標(biāo)準(zhǔn)的文檔流。

固定定位用途：

用于頁(yè)面內(nèi)容比較長(zhǎng)，返回頂部功能等。
用于制作CSS精靈 (現(xiàn)在很少用了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

層疊屬性

對(duì)于上述說(shuō)的定位元素，他們都有可能壓蓋到渲染后的位置上的原有元素。某些場(chǎng)景下我們不希望此事發(fā)生。

此時(shí)就用到了 z-index屬性。它的值是一個(gè)正整數(shù)，值越大會(huì)越在上面顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index屬性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

總結(jié)

相對(duì)定位：相對(duì)于自己原來(lái)的位置進(jìn)行定位。

絕對(duì)定位：選一個(gè)參考點(diǎn)進(jìn)行定位。參考點(diǎn)可以是擁有定位屬性的祖先元素，如果找不到，則為IBC。

固定定位：在頁(yè)面（可視化的屏幕）的固定位置，不隨著頁(yè)面滾動(dòng)而滾動(dòng)。

在線咨詢

上一篇：細(xì)聊JavaScript設(shè)計(jì)原則和常用設(shè)計(jì)模式
下一篇：Web前端：帶你深入了解Angular11新功能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商