html css學習筆記 4 定位

2022-03-09 13:39:13 字數 1502 閱讀 6115

如何讓圖1中的div2移動到如圖2上的位置;

思路:哪些css命令能夠影響盒子顯示的位置呢?

relative相對定位/定位偏移量

position:relative;  相對定位

a、不影響元素本身的特性;

b、不使元素脫離文件流;

c、如果沒有定位偏移量,對元素本身沒有任何影響;

定位元素位置控制

top/right/bottom/left  定位元素偏移量。

absolute絕對定位/定位層級

osition:absolute;  絕對定位

a、使元素完全脫離文件流;

b、使內嵌支援寬高;

c、塊屬性標籤內容撐開寬度;

d、如果有定位父級相對於定位父級發生偏移,沒有定位父級相對於整個文件發生偏移;

e、相對定位一般都是配合絕對定位元素使用;

z-index:[number];  定位層級

a、定位元素預設後者層級高於前者;

待解決:脫離文字流貌似  margin0 auto失效  原因是什麼  閉合浮動等等問題

遮罩濾鏡/固定定位

遮罩彈窗(優酷彈窗)

標準 不透明度:  opacity:0~1;

ie 濾鏡:           filter:alpha(opacity=0~100);

position:fixed; 固定定位

與絕對定位的特性基本一致,的差別是始終相對整個文件進行定位;

問題:ie6不支援固定定位;

定位其他值:

position:static ; 預設值

position:inherit ;  從父元素繼承定位屬性的值

position:relative | absolute | fixed | static | inherit;

定位的相容問題、清浮動方法

position:relative;

在 ie6 下父級的 overflow:hidden; 包不住子級的relative;

position:absolute;

在 ie6 下定位元素的父級寬高都為奇數那麼在 ie6 下定位元素的 right 和 bottom 都有1畫素的偏差。

position:absolute; 絕對定位元素子級的浮動可以不用寫清浮動方法;

position:fixed;  固定定位元素子級的浮動可以不用寫清浮動方法;(ie6不相容)

Html CSS學習筆記4

在此之前要知道,有一些屬性具有繼承特性,但都能修改起預設特性。繼承 inherit 繼承父類的屬性 initial 不繼承父類屬性 顏色單位 blue lightbluea 0 1之間 0代表完全透明 1代表完全不透明拾色器 取色器 lang en charset utf 8 name viewpo...

(9)HTML CSS筆記(定位 )

1 定位 在網頁中,我們是用來確定位置的。position 方位值 static 靜態定位 方位值是不起作用的 relative 相對定位 方位值起作用 absolute 絕對定位 方位值起作用 參考係 除了靜態定位之後,其它都可以作為參考 如果沒有參考係,預設為body來進行參考 作為參考物需要滿...

HTMLCSS學習筆記(九) 定位與錨點

css 有三種基本的定位機制 position 屬性指定了元素的定位型別。position static 靜態定位 預設值 position relative 相對定位 position absolute 絕對定位 position fixed 固定定位 position sticky 粘性定位 定...