css中的定位問題

2021-08-21 14:47:36 字數 1007 閱讀 4256

定位: position:static|absolute|relative|fixed     

靜態定位|

絕對定位|相對定位|固定定位

position:static  預設值。代表元素按文件流擺放。

position:absolute

元素在使用絕對定位之後,不在佔據原來文件流位置(空間),即脫離標準文件流。

元素使用絕對定位,並且使用left和top進行位置設定時,具體位置是從瀏覽器視窗左上角出發;當使用right和top時,是從瀏覽器的右上角出發;當使用bottom和left時,是從瀏覽器首屏的左下角計算;當使用bottom和right時,是從瀏覽器首屏的右下角計算。

巢狀的盒子,父盒子使用定位(非靜態),子盒子絕對定位,那麼子盒子位置是從父盒子位置出發,如果是left和top,則從盒子的左上角開始計算,無視border的寬度和padding

如果盒子設定了絕對定位,則設定left和top時,參考點從祖先元素中尋找離它最近的乙個設定了定位的祖先元素作為參考,不一定是父元素。

作用1:相對自己原來的位置進行定位,還佔據原理的位置,經常用作位置的微調。

作用2:子絕父相

練習:製作網頁裡的小廣告,固定在瀏覽器首屏的右下角,小廣告的右上角有關閉按鈕

position:fixed;left:0;top:0;

參考元素是瀏覽器視窗。

多用於網頁裡的固定導航回到頂部的按鈕及網頁裡的小廣告

CSS布局中定位問題

定位 將指定的元素擺放到頁面指定的位置 通過定位可以任意的擺放元素 通過position 屬性進行定位 static 預設值,沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位,也是絕對定位的一種 開啟元素定位後,可以通過left...

CSS定位問題

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

CSS 定位問題

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