CSS Position(定位)

CSS position屬性用來指定元素如何在頁面上定位，CSS Position(定位)的方式有以下幾種：靜態定位(static)，絕對定位(absolute)，相對定位(relative)，固定定位(fixed)。

CSS定位方法

在網頁上適當定位元素對于良好的布局設計是必要的。CSS中有幾種方法可用于定位元素。下一節將逐一介紹這些定位方法。

靜態定位(static)

始終根據頁面的正常流程來定位靜態定位的元素。HTML元素默認情況下處于靜態位置。靜態定位的元素不影響由top，bottom，left，right，和z-index特性。

如果沒有指定元素的position屬性值，也就是默認情況下，元素是靜態定位。只要是支持position屬性的html對象都是默認為static。static是position屬性的默認值，它表示塊保留在原本應該在的位置，不會重新定位。

說白了，平常我們根本就用不到“position:static”，不過有時候我們使用javascript來控制元素定位的時候，如果想要使得其他定位方式的元素變成靜態定位，就要使用“position:static;”來實現。

示例.box?{

padding:?20px;

background:?#7dc765;

}測試看看?/?

相對定位(relative)

相對定位的元素相對于其正常位置進行定位。

在相對定位方案中，元素的框位置是根據正常流計算的。然后根據屬性- top或bottom和/或left或將框從該正常位置移開right。

示例.box?{

position:?relative;

left:?100px;

}測試看看?/?

注意：相對定位的元素可以移動并與其他元素重疊，但是在正常流程中會保留最初為其保留的空間。

絕對定位(absolute)

絕對定位的元素相對于具有非靜態位置的第一個父元素定位。如果找不到此類元素，則將其放置在相對于瀏覽器窗口“左上角”的頁面上。框的偏移進一步可使用的屬性的一個或多個指定top，right，bottom，和left。

絕對定位的元素將完全從正常流中移出，因此在放置同級元素時不會占用空間。但是，取決于z-index屬性值，它可以與其他元素重疊。此外，絕對定位的元素可以具有margin，并且它們不會與其他任何margin一起折疊。

示例.box?{

position:?absolute;

top:?200px;

left:?100px;

}測試看看?/?

固定定位(fixed)

固定定位是絕對定位的子類別。

唯一的區別是，固定定位的元素相對于瀏覽器的視口是固定的，并且在滾動時不會移動。

示例.box?{

position:?fixed;

top:?200px;

left:?100px;

}測試看看?/?

注意：在打印介質類型的情況下，固定放置的元素會在每個頁面上呈現，并且相對于頁面框是固定的(即使在打印預覽中)。IE7和IE8僅在指定a的情況下支持固定值。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的css 定位连线_CSS Position(定位)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。