CSS position 屬性分析

2021-08-03 08:29:33 字數 1321 閱讀 6922

position是css重要的屬性,通過設定position,可以把元素放置到乙個靜態的、相對的、絕對的或者是固定的位置中。

position有以下五個屬性(在某些資料**中,可能只會介紹前四個屬性)。值描述

static

預設值,設定了static的屬性,沒有定位,它會出現在正常的流中。

relative

生成相對定位的元素,相對於其正常位置進行定位。因此,」left:20」 會向元素的左側位置新增 20 畫素。

absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。它的實際作用是不論視窗滾動與否,元素都會留在指定的位置。

inherit

規定應該從父元素繼承 position 屬性的值。

下面我們寫幾個例子主要觀察一下relative與absolute的用法:

static 就不在演示,它是position的預設屬性值,它只會讓元素按照正常的位置顯示。我們來看看relative值的顯示效果;

position: relative;
charset="utf-8">

h2.move_left

h2.move_right

style>

head>

class="move_left">這個標題相對於其正常位置向左移動h2>

class="move_right">這個標題相對於其正常位置向右移動h2>

相對定位會按照元素的原始位置對該元素進行移動。p>

body>

html>

=== 執行效果 ===

absolute生成絕對定位,absolute在沒有設定trbl(即top/right/bottom/left)值時是根據父級物件的座標作為初始點的,當設定trbl值後就會根據瀏覽器左上角作為原始點。例項如下:

部分**借鑑

charset="utf-8" />

CSS position屬性用法

絕對定位 position absolute 有如下兩種情況 1,沒有設定 top right bottom left 的情況,預設依據父級的 內容區域原始點 為原始點 2,有設定 top right bottom left 的情況,這裡又分了兩種情況如下 1 父級沒 position 屬性,瀏覽器...

css position 屬性詳解

相信很多同學在編寫 設計 的時候多多少少用過css裡的position這個屬性,但是很多時候網頁顯示出來的和自己想象的不太一樣,這篇部落格來教你怎麼使用position。position屬性共有5個不同的值,下面是w3school給出的 解釋 其中,如果不對dom中的元素設定position屬性,那...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性,此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...