定位 · web前端

[TOC] # 定位元素的定位屬性,主要包括定位模式和邊偏移兩部分 **定位模式** ~~~ position: left | right | top | bottom ~~~ **邊偏移** | 邊偏移屬性 | 描述 | | --- | --- | | top | 頂端偏移量, 定義元素相對于其父元素上邊線的距離 | | bottom | 底部偏移量, 定義元素相對于其父元素下邊線的距離 | | left | 左側偏移量, 定義元素相對于其父元素左邊線的距離 | | right | 右側偏移量, 定義元素相對于其父元素右邊線的距離 | 相對于父元素的距離 ## 靜態定位默認方式 `position:static;` 標準流 ## 絕對定位(看臉型) `position:absolute; ` 特點： ◆**自身從瀏覽器出發** ◆絕對定位之后，**元素不占位置**，**會脫標, 脫離標準流**。 ◆**嵌套的盒子，父元素沒有給自身絕對定位，子元素絕對定位，子元素從瀏覽器出發設置自身位置。** ◆**嵌套的盒子，父元素絕對定位，子元素絕對定位，子元素從父元素出發設置自身位置**。 ◆行內元素轉成行內塊。（不推薦使用） ## 相對定位（自戀型）還在標準流中 `position:relative; ` ◆位置從自身出發。 ◆設置相對定位之后，**還占據原來的位置**。 ◆子絕父相，子元素絕對定位，父元素相對定位。 ◆嵌套的盒子，父元素相對定位，子元素絕對定位，子元素從父元素出發設置自身位置。 ◆不能將行內元素轉成行內塊。 ## 固定定位 `position:fixed;` 特點: ◆位置從瀏覽器出發。 ◆**不占據原來的位置，會脫標** ◆可以將行內元素轉換為行內塊。（不推薦使用） **固定定位一定要寫寬和高, 除非有內容撐開不用寫** `height: 100%;` `width: 100%;` ## 子絕父相子級是絕對定位, 父級用相對定位絕對定位是將元素依據最近的已經定位絕對,固定或相對定位的父元素進行定位就是子級是絕對定位, 父級只要是定位就可以(不管是絕對還是相對) # 定位的盒子居中對齊 ◆`margin:0 auto;` **只能**讓標準流的盒子居中對齊。 ◆子絕父相的盒子，居中對齊，首先left 50%, 父盒子一半，使用margin-left:負值, 向左走自己外邊距負的一半。 ~~~ <style> .father { width: 800px; height: 400px; background-color: pink; margin: 40px auto; } .son { width: 100px; height: 40px; background-color: purple; position: absolute; /* 加了絕對定位的盒子, 左右auto就無效了 */ /* margin: 0 auto; */ left: 50%; /* left 父盒子寬度的一半 */ margin-left: -50px; /* 左走自己寬度的一半 */ top: 50%; margin-top: -20px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> ~~~ # 疊加次序在css中,要想調整重疊定位元素的堆疊順序, 可以對定位元素應用`z-index`層疊等級屬性, 其值可以為正整數,負整數和0 比如: `z-index: 2;` 注意: 1. `z-index`的屬性值是0, 取值越大, 定位元素在層疊元素中越居大 2. 如果取值相同,則根據書寫順序,后來居上 3. 后面數字一定不能加單位 4. 只有相對定位,絕對定位,固定定位有此屬性,其余標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性 ~~~ <style> div { width: 200px; height: 200px; background-color: pink; position: absolute; /* 絕對定位 */ top: 0; left: 0; } div:first-child { z-index: 1; /* font-weight: 700 */ } div:nth-child(2) { background-color: purple; top: 30px; left: 30px; z-index: 2; } div:last-child { background-color: skyblue; top: 60px; left: 60px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> ~~~ # 定位模式轉換跟浮動一樣，元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊模式， ** 因此比如行內元素如果添加了絕對定位或者固定定位后浮動后，可以不用轉換模式，直接給高度和寬度就可以了。** # 四種定位總結 | 定位模式 | 是否脫標占有位置 | 是否可以使用邊偏移 | 移動位置基準 | | ------------ | ---------- | --------- | ---------------- | | 靜態static | 不脫標，正常模式 | 不可以 | 正常模式 | | 相對定位relative | 不脫標，占有位置 | 可以 | 相對自身位置移動（自戀型） | | 絕對定位absolute | 完全脫標，不占有位置 | 可以 | 相對于定位父級移動位置（拼爹型） | | 固定定位fixed | 完全脫標，不占有位置 | 可以 | 相對于瀏覽器移動位置（認死理型） |