css中的position屬性值的探究(小結(jié))

發(fā)布時間：2018-09-25 16:10:20 作者：NineKit

我要評論

這篇文章主要介紹了css中的position屬性值的探究(小結(jié))的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

css的position屬性指定了元素的定位類型，然后通過top，botton，left，right來具體定位。

在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。

position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。

下面博主將一一進行含代碼和運行結(jié)果的對比解釋

首先是不設(shè)置position屬性，可以看到two元素的top的屬性并未生效，而顏色屬性是有效的，當(dāng)前位置是默認文檔流中的位置，以此為原型對比position改變時的元素位置的變化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="./j.css">

</head>

<body>

    <div class="box" id="one">One</div>

    <div class="box" id="two">Two</div>

    <div class="box" id="three">Three</div>

    <div class="box" id="four">Four</div>  

</div>

</body>

</html>

.box {
    display: inline-block;

    background: red;
    color: white;
  }
  
  #two {
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

position：static

在#two的類下添加position：static;如下（后面每處只修改position的值）

#two {
    position:static;
    top: 260px;
    bottom: 126px;
    left: 20px;
    background: blue;
  }

HTML元素的默認值，即沒有定位，元素出現(xiàn)在正常的流中。

靜態(tài)定位的元素不會受到 top, bottom, left, right影響。

這個值既然會使定位屬性失效，那么它存在的意義是什么的？

在網(wǎng)頁樣式修改的過程中，可以暫時的屏蔽某些元素的位置信息，或者在修改的時候，保留，某些部分的位置信息，便于恢復(fù)。

position：relative

相對定位，相對與原來正常文檔流的位置定位，但是在定位時不改變原來的頁面布局，既是相當(dāng)于只是把定位的元素進行了移動，而移動的對比標(biāo)準(zhǔn)位置就是正常文檔流中的位置，而原來的位置會留白。

position ：absolute

絕對定位，該元素將從普通文檔流中刪除，并且不會為頁面布局中的元素創(chuàng)建空間。他相對于最近已定位的父元素定位。例子中即是根據(jù)body元素來定位的。

position ：fixed

固定定位，所謂固定定位和絕對定位相似，一樣都會從普通文檔流中刪除，并且不會為頁面布局中的元素創(chuàng)建空間；不一樣的是它是固定在視窗上的，是以視窗為定位對象的的，相信大家瀏覽很多網(wǎng)頁時都有這樣的感受，網(wǎng)頁上部或者下部會有廣告不會隨著網(wǎng)頁的上下滾動而移動，它們是固定在網(wǎng)頁上的，并且如果沒有設(shè)置z-index來修該疊放次序，它們會覆蓋網(wǎng)頁的內(nèi)容。