CSS Position（定位）

lpjustdoit 發布于2019-08-29 18:39 / 2072人閱讀

摘要：定位的起始位置為此元素原先在檔流的位置。忽略和從父元素繼承該屬性的值以上的和可以使得元素脫離文檔流。絕對定位脫離檔流的布局，遺留下來的空間由后的元素填充。默認定位表示此元素為默認定位式。

Position（定位）

position可以取五個值

參數	描述
absolute	絕對定位；脫離?檔流的布局，遺留下來的空間由后?的元素填充。定位的起始位置為最近的?元素(postion不為static)，否則為Body?檔本身。
relative	相對定位；不脫離?檔流的布局，只改變?身的位置，在?檔流原先的位置遺留空?區域。定位的起始位置為此元素原先在?檔流的位置。
fixed	固定定位；類似于absolute，但不隨著滾動條的移動?改變位置。
static	默認值；默認布局。忽略 top, bottom, left, right和z-index
inherit	從父元素繼承該屬性的值

以上的absolute 和fixed 可以使得元素脫離文檔流。

position屬性只是定義元素的定位方式，要想此元素能按照希望的位置顯示，就需要使?下?的屬性(position:static不?持這些)：

left ：表示向元素的左邊插?多少像素，使元素向右移動多少像素。

right ：表示向元素的右邊插?多少像素，使元素向左移動多少像
素。

top ：表示向元素的上?插?多少像素，使元素向下移動多少像素。

bottom ：表示向元素的下?插?多少像素，使元素向上移動多少像
素。

上?屬性的值可以為負，單位：px 。

絕對定位(absolute)

脫離?檔流的布局，遺留下來的空間由后?的元素填充。

定位的起始位置為最近的?元素(postion不為static)，否則為Body?檔
本身。

相對定位(relative)

不脫離?檔流的布局，只改變?身的位置，在?檔流原先的位置遺留空?區域。

定位的起始位置為此元素原先在?檔流的位置。

固定定位(fix)

類似于absolute，但不隨著滾動條的移動?改變位置。

默認定位(static)

表示此元素為默認定位?式。

繼承(inherit)

從父元素繼承定位?式。

1.父容器的position屬性為relative

由上圖可知，div繼承了父類的position屬性（relative）;這時候div-a沒有脫離文檔流，只是相對于原來的位置向右邊偏移了，留下一個空位。參考絕對定位的圖形。

注意：此時的父容器是沒有設置寬高的，（見圖），我們可以看見父容器寬度為100%，高度自適應。

下面我們把父容器的定位改成absolute

2.父容器的position屬性為absolute

可以看出，div-a脫離了文檔流，相對于父容器向右偏移了350px，后面的div-b占據了他的位置.

注意：此時我們可以發現，父容器寬和高都是自適應的。

然后我們在對兩種情況進行研究。

父容器postion屬性為static

父容器寬度為100%，高度自適應。

父容器的position屬性為fixed

父容器寬高均自適應

從這里面。我們不僅可以看出inherit的特性。而且我們還發現了以下規則：

重點

在父容器沒有設置寬高的時候，

當父容器定位為relative和static時，及沒有脫離文檔流時，寬度為100%

當父容器定位為absolute和fixed時，及脫離文檔流時，寬高為自適應

云服務器 GPU云服務器 position定位 position，css position屬性，css position()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114475.html

position 的屬性值

摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
細說css中的position屬性

摘要：塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。相對定位，相對于自己的初始位置，不脫離文檔流。有過css開發經驗的同學，對于position這個屬性一定不會陌生，然而這個熟悉的屬性確是面試題中的常客，也就說明了該屬性在css的世界是有一定的江湖地位的，那么我們就來詳細的說說position這個屬性。在w3school中是這樣解釋posi...

ssshooter 2019-08-30 14:07 評論0 收藏0
CSS詳細解讀定位

摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。一前言 CSS定位是CSS布局只能夠重要的一環。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。二正文 1.文檔流布局的概念將窗體自上而下分成一行行，并在每行中按從左至右的...

1treeS 2019-08-30 14:01 評論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...

xiguadada 2019-08-29 15:23 評論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...

alexnevsky 2019-08-02 10:26 評論0 收藏0
CSS：層疊樣式表—position

摘要：脫離了文檔流不為元素預留空間，通過指定元素相對于最近的非定位祖先元素的偏移，來確定元素位置。在所有情況下即便被定位元素為時，該元素定位均不對后續元素造成影響。否則其行為與相對定位相同。生效規則須指定或四個閾值其中之一，才可使粘性定位生效。CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。常見語法 stat...

kid143 2019-04-23 13:38 評論0 收藏0