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

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

我要評(píng)論

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

css的position屬性指定了元素的定位類(lèi)型，然后通過(guò)top，botton，left，right來(lái)具體定位。

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

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

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

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

<!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的類(lèi)下添加position：static;如下（后面每處只修改position的值）

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

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

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

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

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

position：relative

相對(duì)定位，相對(duì)與原來(lái)正常文檔流的位置定位，但是在定位時(shí)不改變?cè)瓉?lái)的頁(yè)面布局，既是相當(dāng)于只是把定位的元素進(jìn)行了移動(dòng)，而移動(dòng)的對(duì)比標(biāo)準(zhǔn)位置就是正常文檔流中的位置，而原來(lái)的位置會(huì)留白。

position ：absolute

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

position ：fixed

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