[CSS]CSS Position 詳解

時間 2019-12-06

標籤 css position 詳解欄目 CSS 简体版

原文原文鏈接

一. CSS position 屬性介紹

CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed四種取值，默認是static。html

二. position: static

static：沒有定位，元素出如今正常的文檔流中，忽略left，right，top，bottom和z-index。瀏覽器

因此對元素position屬性設定static時，left屬性不起做用，可是元素出如今正常的流中。spa

三. position: fixed

fixed：生成固定定位的元素，相對於瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，所以不佔據空間，可能會和其餘元素髮生重疊。設計

窗口滾動不會影響content元素位置，content元素一直在contaniner元素的右下角。htm

四. position: relative

reletive：元素相對其本身正常位置定位，元素在正常的文檔流中。圖片

沒有設置left和top時的正常位置。文檔

設置了left和top屬性，元素位置移動，向右移動50px，向下移動20px。可是元素預留的空間保持正常流動，也就是不會對其餘元素產生影響。it

五. position: absolute

absolute：元素絕對定位，相對於static定位之外的第一個父元素，元素脫離文檔流。io

因此會找到static定位之外的第一個父元素，由於span的父元素content和container都沒有設置position屬性，默認爲static，找到的第一個父元素就爲html<body>，相對於<body>向左移動100px。class

若是對content或container設置position屬性爲relative，absolute或fixed，span會相對於content或container來定位。
如下是三個例子，

span元素的第一個position屬性不爲static的父元素是content，因此相對於content向左移動10px。

當content屬性設置爲fixed時，span元素相對於content向左移動10px。

span元素第一個position屬性不爲static的父元素是container，因此相對於container向左移動10px。

六. 總結

position: static，元素出如今正常的流中，沒法經過left，right，top和bottom設置元素定位。
position: fixed，元素脫離文檔流，相對於瀏覽器窗口定位不變。
position: relative，元素出如今正常的流中，相對於其正常位置定位。
position: absolute，元素脫離文檔流，相對於static之外的第一個父元素定位。

理解了position的屬性，能夠更好的設計頁面和實現頁面。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。