網頁製作中，當我們希望元素出現在某個特定的位置時，浮動布局就顯得不夠精確了，此時我們便需要使用定位屬性對元素進行精確定位。css的定位就是將元素放在指定的頁面位置。首先我們要確定定位的模式，在css中，position屬性用於定義元素的定位模式，他有5個常用的屬性值，分別表示不同的定位模式，1.static靜態定位(預設的定位方式)2.relative相對定位，相對於原文件流的位置進行定位。3.absolute絕對定位，相對於其上乙個已經定位的父元素進行定位4.fixed固定定位，相對於瀏覽器視窗進行定位。5.sticky黏性定位。當確定屬性之後，再通過top、bottom、left和right來精確定位元素的位置。
1. static靜態定位
靜態定位是元素的預設定位方式，當position的屬性值是static時，元素會顯示在 html文件流中預設的位置，他會遵循預設值顯示為靜態位置，在靜態定位狀態下不能通過top、bottom、left和right來改變元素的位置。ps:可以取消元素之前的定位設定。
2. relative相對定位
相對定位是將元素相對於它在標準文件流中的位置進行定位，參照物是自身所在的位置，可以通過設定偏移量來改變元素的位置，同時不會使元素脫離文件流，他的空間也會被保留，如果沒有定義偏移量，對元素本身也沒有任何影響。
3. absolute絕對定位
絕對定位是將元素依據最近的已經定位的父元素進行定位，若所有父元素都沒有定位，則依據body根元素html(瀏覽器視窗)進行定位，與相對定位不同的是，絕對定位會使元素完全脫離文件流，不再佔據標準文件流中的空間。ps:能使內聯元素支援寬高，讓內聯元素具備塊的特性，當定義多個偏移量時，如果left和right衝突，則以left為準，top和bottom衝突則以top為準。
4. fixed固定定位
固定定位的參照物始終都是相對於整個瀏覽器視窗進行固定定位的，當對元素設定固定定位後，該元素將脫離文件流，會使內聯元素支援寬高，具備內聯塊的特性，使塊元素預設寬根據內容決定，讓塊元素具備內聯塊的特性。相對於整個瀏覽器視窗進行偏移，不受瀏覽器滾動條的影響，不會受到父元素的影響。
5.sticky黏性定位
在沒有到達指定位置的時候，元素的定位效果型別是relative相對定位，到達了指定位置，就變成了fixed固定定位。如：position：sticky ；top：100px；在元素距離視窗定位》100px時，元素定位效果型別relative，當元素距離視窗<=100px時，效果型別為固定定位。
6. z-index層疊等級屬性
當多個元素同時設定定位時，定位元素之間可能會產生重疊，可以對定位元素使用z-index層疊等級屬性，其取值以是正整數、負整數和0，取值越大，定位元素在層疊元素中越靠上，z-index的預設值是0。ps：該屬性只對定位元素生效
CSS定位屬性
position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left 定義了定位元素左...
CSS 定位屬性
使用定位屬性可以控制元素的位置，包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對於文件布局的原始位置上進行偏移，而絕對定位是指允許元素與原始的文件布局分離且任意定位。1.1定位方式 position 使用定位方式屬性可以控制瀏覽器應如何定位html 元素。語法 position stati...
定位屬性CSS
第1個盒子 第2個盒子 第3個盒子 鏈結1鏈結2 鏈結3鏈結4 鏈結5 position屬性 static 預設值，沒有定位！relative 相對定位！相對於自身原來的位置！也就是現在的位置，按照定位能還原到原本的位置！設定相對定位的盒子，原本的位置會被留下來！absolute 絕對定位 相對於離...