從零開始前端學習[19]:前端中重要的屬性，定位position屬性

前端中重要的屬性，定位position屬性

關于定位
固定定位fixed
相對定位relative
絕對定位absolute
層級關系z-index
使用定位來完成居中效果

提示：

部落客：章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

關于定位fixed

定位也就是元素相對于其正常出現的位置，或者是相對于父級應該出現的位置，甚至相對于浏覽器視窗本身出現的内容；

無論是塊級元素還是行級元素，或是什麼類型的标簽,隻要定位以後(relative除外)，都可以支援寬高

定位的相關屬性:

屬性	屬性值
position	fixed/relative/absolute
left	px / %
right	px / %
top	px / %
bottom	px / %

固定定位position:fixed

固定定位fixed:相對于我們的可視化區域，即浏覽器的視窗，注意的是，它并不是body，而是能見得到的可視化區域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    div{
      width: px;
      height: px;
      background: deepskyblue;
      line-height: px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>box</div>
  沒有比腳更長的路，沒有比人更高的山first<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>
  沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>

</body>
</html>

上述的代碼是沒有添加定位屬性的，可以看到box是占據文檔流的，而文字是在盒子的下方進行顯示出來的。

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

給div的盒子添加屬性

div{
      width: px;
      height: px;
      background: deepskyblue;
      position: fixed;
      top: px;
      left: px;
      line-height: px;
      text-align: center;
    }

顯示如下:

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

可以看到上圖中，box盒子的定位是固定的，在可視化區域中滾動條滾動的時候，但是并不會影響到盒子的位置，盒子也不會因其滾動而改變位置，并且盒子原來的位置其實已經不去占有了，即脫離了文檔流了，固定定位 fixed (通常用于固定的導航欄，或者側邊欄廣告)

相對定位relative

相對定位，相對總是要有一個參考點的，那麼相對定位的參考點是什麼?？相對定位主要是相對于其正常出現的位置(原來的位置)，并且不會去脫離文檔流，是以原來的位置依然保留下來，現在的位置是脫離了文檔流，漂浮起來,是以一般情況下，我們并不去使用相對定位，而隻是把它用來當做父級的定位元素

使用:

position:relative;

div{
      width: px;
      height: px;
      background: deepskyblue;
      position: relative;
      top: px;
      left: px;
      line-height: px;
      text-align: center;
    }

将上面的源代碼修改成relative形式

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

可以看到相對定位之後，原來的位置依然存在，而新的位置是相對于原來位置來說的，原來的位置依舊保留下來，并且沒有脫離文檔流，是以一般情況下面，我們都很少去使用這種定位關系。而隻是用來做為絕對定位的父級元素的定位

絕對定位absolute

絕對定位，既然是定位，肯定要有一個參考點，固定定位相對的是可視化視窗，相對定位是相對于原來出現的位置，那麼絕對定位呢？絕對定位是相對于最近的父級定位元素(包括我們的三種定位fixed，relative，absolute)定位，隻是用relative去做為父級定位元素，不會去影響父級元素的特性，注意：如果一直到body都沒有找到定位元素，那麼這個時候就相對于我們的body定位

使用：

position:absolute;
注意：父級元素同樣是需要定位的，如果沒有定位的話，會一直往上找

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .box1{width: px;height: px;border: px solid red;position: relative;top: px}
    .box2{width: px;height: px;border: px solid green;
      position: absolute; left: px;
      top: px;}
    .box3{width: px;height: px;border: px solid blue;position: absolute;left: px;top: px}
  </style>
</head>
<body>
<div class="box1">
  box1
  <div class="box2">
    box2
    <div class="box3">
      box3
    </div>
  </div>
</div>
沒有比腳更長的路，沒有比人更高的山first<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>
沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>沒有比腳更長的路，沒有比人更高的山<br>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

如上所示:

box1采用的是relative定位形式，box2是相對于box1來進行居中的，是以它會去尋找父級box1的定位形式，box3是相對于box2進行居中的，是以它會去尋找box2的定位形式，是以如果需要相對某個元素進行定位的話，這個時候需要在自己添加絕對定位，并且給父級元素也要有一個定位，無論是fixed，還是relative，或者是absolute也可以

注意：使用absolute之後，margin:auto失效了

注意定位的一些問題:

沒有定位的情況下，快級元素如果不給寬度，是預設父級元素的100%，但是定位以後，不再預設寬度100%，是内容撐開寬度

無論是什麼标簽，隻要定位以後都是可以支援寬高的，除了relative，也就是如果脫離了文檔流後，都是可以支援寬高的

脫離文檔流用了absolute之後，這個時候使用margin:auto失效，但是也可以利用其實作居中效果

層級關系z-index

什麼是層級關系？？之前在寫float相關的時候，說浮動的時候會提升半個層級，那麼什麼是層級？因為浮動和定位(relative除外)，會脫離文檔流，這樣的一種脫離過程就會導緻原來的位置被其他元素填充，而自己浮在其内容之上，造成一種疊加的效果，那麼這樣一層一層的形式，就叫做層級關系。

是以層級的關系是在針對脫離文檔流的基礎之上的，如果沒有脫離文檔流，每個元素都自己占有一塊位置，也就不會形成層級的關系。

層級屬性z-index:999;

注意：值沒有機關，值越大，層級越高，就會越在上面，并且值沒有上限，也沒有下限，隻比較值得大小

使用定位來完成居中效果

使用cacl計算值來進行居中操作:

計算公式如下:

left:calc(50% - 100); //50%是父級元素的寬度的一半，100是子級元素的一半，水準居中
top:cacl(50% - 100);//50%是父級元素高度的一半，100是子元素的一半，垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .box1{width: px;height: px;box-shadow:   px  deeppink;position: relative;margin:px}
    .box2{width: px;height: px;box-shadow:   px  blue;position: absolute;left: calc(% - px);
      top:calc(% - px);}
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>

</body>
</html>

顯示如下：

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

一種奇葩的方法：

水準居中:

position:absolute;
    margin:auto;
    left:;
    right:;

上下居中:

position:absolute;
    margin:auto;
    left:;
    right:;

如果是上下左右居中的話:

position:absulote;
top:;
bottom:;
left:;
right:;

是以對上面的案例進行修改後，依舊是可以實作居中效果的：

對部分style進行修改：

.box1{width: px;height: px;box-shadow:   px  deeppink;position: relative;margin:px}
        .box2{width: px;height: px;box-shadow:   px  blue;position: absolute;left: ;);
          top:;right: ;bottom: ;margin: auto}

同樣是可以實作居中顯示的:

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

歡迎持續通路部落格，謝謝

從零開始前端學習[19]:前端中重要的屬性，定位position屬性

前端中重要的屬性，定位position屬性

關于定位fixed

固定定位position:fixed

相對定位relative

絕對定位absolute

層級關系z-index

使用定位來完成居中效果

使用cacl計算值來進行居中操作:

一種奇葩的方法：

繼續閱讀

9種HTML中通過CSS方式隐藏元素的方法彙總

Elasticsearch 8.X 新官方文檔不好用，怎麼辦？

微信小程式中自定義導航和地圖定位

基于MATLAB BP神經網絡的水果識别

python+selenium 定位隐藏元素

關于微信小程式地圖之MapContext.moveToLocation

[CSS] Position 用法進階01：比對父級容器空間

浮動定位和表格

GPS經緯度坐标和UTM坐标的互相轉換

android 中轉換不同坐标系

WGS-84坐标系轉GCJ02坐标系WGS-84坐标系轉GCJ02坐标系

4G子產品的GPS定位差距過大

GPS資料類型格式 NMEA協定

從NMEA0183到GNSS定位資料擷取（一）原理篇

陪學讀書會——《定位》第七章：跟随者的定位

陪學讀書會——《定位》第九章：名字的威力（上）