摘要:元素脫離文檔流元素相對于它包含的元素進行定位,相對于所有其他元素,絕對定位的元素是獨立定位的。元素脫離文檔流,相對于瀏覽器窗口進行定位與其他所有元素獨立大多數瀏覽器支持,除外大概也沒有公司要求必須支持了。。
未完待續......最近在讀《CSS secrets》, 看完再來補充……
positionCSS的position屬性用于指定元素的定位類型。默認值: static
4個可能的值: static元素按常規文檔流(從左到右 從上到下)定位;
靜態定位的元素不能使用 top, right, bottom 和 left 屬性進行定位。
absolute元素脫離文檔流;
元素相對于它包含的元素進行定位,相對于所有其他元素,絕對定位的元素是獨立定位的。
它的定位要么相對于最近的祖先元素,要么相對于文檔本身。
fixed元素脫離文檔流,相對于瀏覽器窗口進行定位;
與其他所有元素獨立;
大多數瀏覽器支持,IE6 除外(大概也沒有公司要求必須支持 IE6 了=。=)。
relative元素按照常規文檔流布局,它的定位相對于他文檔流中的位置進行調整;
系統保留元素在正常文檔流中的空間,不會因為要填充空間而將其個邊合攏,也不會將元素從新的位置“推開”。
一些實例position 的值為 static 以外的值的元素,可通過設置元素 top 和 left 屬性指定其左邊緣到容器(通常是文檔本身)左邊緣的距離和其上邊緣到容器上邊緣的距離。
例如,定位一個距離文檔左、上邊緣分別是 100px 的 div 元素,可以指定如下樣式:
如果一個元素使用絕對定位,它的 top 和 left 屬性是它相對于 position 屬性設置為出 static 以外的祖先元素的上、左邊緣的距離。如果它沒有設置過除 static 以外的祖先,則使用文檔邊緣進行定位。
div1-1div2-1
效果如下:
任何絕對定位的子元素都相對于容器進行定位。
使用 top 和 left 定位元素的左上角位置是常見的定位方法,也可以使用 right 和 bottom 對指定元素相對于容器的右、下邊緣進行定位。
除了指定元素 width 來確定元素寬度,還可用過指定 left 和 right 的方式(同樣,也可通過指定 top 和 bottom 來指定元素的高度)。 同時指定時,width 優先級高于 right/left, height 優先級高于 bottom/top; left 優先級高于 right, top 優先級高于bottom.
沒必要給每一個動態元素指定尺寸。 某些元素(如圖片)具有固定尺寸。對于包含文本或其他流式內容的動態元素通常指定寬度就足夠了,讓布局決定它的高度。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115242.html
摘要:獲得當前元素相對于的位置。返回一個對象含有和當給定一個含有和屬性對象時,使用這些值來對集合中每一個元素進行相對于的定位。獲取對象集合中第一個元素相對于其的位置。結尾以上就是中與偏移相關的幾個的解析,歡迎指出其中的問題和有錯誤的地方。 前言 這篇文章主要想說一下Zepto中與偏移相關的一些事,很久很久以前,我們經常會使用offset、position、scrollTop、scrollLe...
摘要:非根元素,且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內容區域創建的。如何觸發只需要保證滿足下面至少一條就會觸發根元素設置了值不為的元素設置了屬性不為的元素設置了屬性不為和的元素設置了的值為和中的任何一個的元素。 作者:心葉時間:2018-04-18 17:53 包裹元素剪裁條件 是不是包裹元素overflow設置為hidden以后,內部元素如果超過包裹元素的話就會被剪...
摘要:可以試試去掉的會發生很奇妙的事呢附加關于子元素設置為而引發的問題。附加關于開啟硬件加速提升網站動畫渲染性能問題。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 1. 水平垂直居中問題 這可以說是最經典的問題了,水平垂直居中,這個問題從入門前端一直到面試,甚至到工作之后都會時不時遇到,最近的面試也被問過這之類的問題,這里還是好好總結一番,以作備忘。公用 HTML 部分: ...
摘要:屬性控制背景圖片在被屬性改變了大小及被屬性定位后如何平鋪。可用于此屬性的關鍵字為和。對于長度和百分比,我們也可以指定沿軸和軸的位置。屬性指定背景圖片應根據盒模型的哪個區域進行定位。最后,屬性是其他背景相關屬性的簡寫。 像我之前提到的那樣,文檔樹中的每個元素只是一個矩形盒子。這些盒子都有一個背景層,背景層可以是完全透明或者其它顏色,也可以是一張圖片。此背景層由8個CSS屬性(加上1個簡寫...
閱讀 3948·2021-09-24 10:24
閱讀 1386·2021-09-22 16:01
閱讀 2713·2021-09-06 15:02
閱讀 1014·2019-08-30 13:01
閱讀 1002·2019-08-30 10:52
閱讀 632·2019-08-29 16:36
閱讀 2232·2019-08-29 12:51
閱讀 2333·2019-08-28 18:29