css中絕對定位和固定定位的區別

2021-10-18 07:29:02 字數 2623 閱讀 5463

首先我們製作兩個標準塊級元素,**如下:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document

div

為中華之崛起而讀書!!!

執行結果如下:

現在給第乙個塊級元素新增絕對定位,我們來看看效果:

**如下:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document

div

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

執行結果如下:

總結:盒子新增了絕對定位,則絕對定位會壓住下面標準流所有的內容

那我們來看看浮動的效果,我現在把絕對定位換成浮動:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document

div

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

執行結果如下:

咦,難道浮動的元素不會壓住標準流盒子嗎?

如上圖,浮動的盒子是會壓住標準流盒子的,但是不會壓住標準流的文字()o ~

我在複製多一些文字,效果更明顯,你們看:

**如下:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document

div

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!為中華之崛起而讀書!!!

執行效果如下:

是不是很神奇,浮動為什麼不會壓住文字呢,其實浮動存在的最初是為了做文字環繞效果的,讓文字圍繞浮動元素!

絕對定位和固定定位

絕對定位 定位 基於 定位,上下左右 沒有父級元素定位的前提下,相對於瀏覽器定位 假設父級元素存在定位,我們通常會相對於父級元素進行偏移 在父級元素範圍內移動 相對於父級或瀏覽器的位置,進行指定的偏移,絕對定位的話,它不在標準文件流中,原來的位置不會被保留 lang en charset utf 8...

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

CSS中的靜態定位 固定定位 絕對定位和相對定位

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!靜態定位 html元素的預設值,即沒有定位,元素出現在正常的流中。靜態定位的元素不會受到top,bottom,left,right影響。固定定位 元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動 middle相對定位 層級關係為 ...