css定位問題

2021-10-20 14:33:13 字數 869 閱讀 9642

在進行頁面布局的時候,我們會用到定位,用於將元素放置在我們想要(ue原型圖或者ui設計稿)的位置,達到設計要求。

定位的4個關鍵字,分別是static(靜態的,預設是這個屬性)、fixed(固定的)、absolute(絕對的)以及relative(相對的);

不會脫離正常文件流的定位屬性有:static和relative,不會改變元素的盒模型,也不會使元素成為會計元素;

會脫離文件流的是:absolute ,會讓元素成為塊級元素;

通常所說的定位指的是:absolute、relative和fixed;

雖然css的布局看起來是在二維平面上,但是css布局有乙個屬性叫做z-index,用來表示三維的z軸,當屬性值為z-index:0;時,即表示在二維平面上,也就是所謂的正常文件流,而absolute和relative會讓元素浮起來,也就是z-index的值大於零的情況,只是absolute會脫離正常文件流,不會保留在正常文件流中的佔位符,而relative會保留在正常文件流中的佔位符

給fixed和absolute定位的元素設定float時不會生效

float也會脫離正常正常文件流;按照是否會脫離文件流:

會脫離文件流

不會脫離文件流

是否成為塊級元素

top\bottom\left\right是否可用

absolute

relative是是

float

static

inline–block

CSS定位問題

在看這篇文章是,希望大家對css盒式模型有所了解,不清楚的點這裡。一 定位概述 在說明定位問題前,我們先聊聊div這個元素。通常我們把p h1或div元素常常稱為塊級元素。這意味著這些元素顯示為一塊內容,即 塊框 塊框從上到下乙個接乙個地垂直排列。與之相反,strong和span等元素稱為行內元素,...

CSS 定位問題

top bottom left right top right bottom left應用於定位元素,position屬性設定後。top right bottom left的值設定為正值時,元素向內收縮,設定為負值時,向外擴張 偏移屬性定義了距離包含塊相應邊的偏移,而不是距離包含塊左上角的偏移。ca...

css定位z index問題

1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大,導致始終無法被遮蓋 3.js動態計算z index,導致元素覆蓋關係部可控 層級遮蓋bug出現的原因 ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static時,如果不設定z index...