CSS控制元素定位

2021-07-24 04:28:48 字數 1404 閱讀 3294

元素定位屬性:position:static | absolute | fixed |relative;

static

元素按自身預設方式顯示,並沒有什麼卵用

absolute

絕對定位,按照父元素為基準,進行偏移,如果沒有父元素,就以body元素為基準定位。一定要記住是相對于父元素的定位 !position元素是漂浮起來的,有可能會覆蓋到其他的正常元素

這裡簡單講一下偏移屬性,有四個

這裡使用了position定位

div>

body>

html>

relative相對定位,相對於自身的定位,自己本身沒有定位前的位置就是預設位置,相對於預設值定位。比如兩個div,本來的情況是乙個盒子佔一行,如果後面的div給了個相對定位,那麼他的移動基準就是自己本來在的位置。

固定定位,他也是以乙個元素為基準的,不過這個基準是你當前的檢視視窗,也就是說,如果有下拉條的情況下,你的fixed元素是會跟著你的滑動而移動的,而且他也是浮動的,有可能覆蓋到其他的元素。

html>這裡加了很多

目的是為了有下拉條。

未完待續……

css元素定位

我們可以使用css的position屬性來設定元素的定位型別,postion的設定項如下 relative 生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移 absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上...

CSS 元素的定位

css定位令你可以將乙個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動 參見第13課 你將能夠建立多種高階而精確的布局。本課我們將討論以下內容 把瀏覽器視窗想象成乙個座標系統 如果我們要把這個標題放置在距文件頂部100畫素 左邊200畫素的地方,我們可以在css中輸入以下 h1 得到的顯示效...

CSS之元素定位

css中元素定位有如下情況 1 流 靜態定位 預設 position static 不能指定位置 2 浮動定位 float left right 不能嚴格指定位置 3 相對定位 position relative 使用left top right bottom進行定位,仍占用頁面空間 以 其自己的靜...