你對CSS布局中的Position了解程度有多少

2024-07-11 08:31:22

字體：大中小

來源：轉載

供稿：網友

當人們將接觸CSS布局的時候傾向于使用Position。Positoin似乎是一個很容易掌握的概念。從表面上來看，你只要精確指定了一個塊所處的位置，它就會坐落在那里。然而定位比你剛接觸時要更復雜一些。這里有幾件事會絆倒一個新手，所以在熟練使用之前需要掌握它們。

一旦你深入地理解了Position的工作原理，你就可以使用它做出很棒的事來

盒模型和Position類型

為了理解定位你首先的理解盒模型。前面一個鏈接是我之前寫給InstantShift關于盒模型的一篇文章。我在那里做了詳細的介紹，在這里我將提供一個快速的總結。

在CSS中，每個元素都被一本矩形框所包圍，每個元素都定了內容區，內容區被內邊距（填充）包圍，邊框包圍了內容區和內邊距。外邊距在邊框外面用來和其他盒子分隔開來。你可以在下面這張圖中看到這些

定位模式定義了一個盒子在整體布局中將會放置在哪里、每個盒子怎樣影響在它周圍的盒子。定位模式包含了正常文檔流，浮動流和幾種類型的定位元素

CSS定位屬性有五個可取值

position: absolute
position: relative
position: fixed
position: static
position: inherit

下面我將對前三個屬性進行詳細地講解，對后面兩個屬性只是作簡單的介紹

static是position默認的值。每個position屬性被設置為static的元素將在正常文檔流中顯示。它們被放置和顯示的規格在盒模型中定義。

一個static定位的元素將會忽略任何top, right, bottom, left, z-index屬性的值。為了使用其中任何一個值，你必須將元素的position屬性設置為absolute, relative, fixed之一

inherit和其他所有css屬性一樣，當前元素取得和父級元素相同的屬性值。

絕對定位(Absolute Positioning)

絕對定位的元素完全從正常文檔流中除去。對于包圍它的其他元素而言，它們認為絕對定位的元素不存在，就好像將元素的display屬性設置為none。假如你想保留它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你在設置一個絕對定位元素的位置時，top, right, bottom, left四個屬性，你通常只定義其中的兩個，top或者left，以及left或者right。它們的默認值都是auto

理解絕對定位的關鍵是理解它們從哪里開始。假如top值為20px，問題是20px是從哪里開始的。

一個絕對定位元素的起點位置是相對于它第一個postion屬性值不為static的父級元素而言的。假如在父級元素鏈中沒有滿足條件的，絕對定位元素就是相對于整個文檔窗口來定位的。哈

上一篇：通過css屬性margin:auto讓Div中的Table居中

下一篇：你應該知道的30個css選擇器