建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站專注于北流網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供北流營(yíng)銷型網(wǎng)站建設(shè)，北流網(wǎng)站制作、北流網(wǎng)頁(yè)設(shè)計(jì)、北流網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造北流網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供北流網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
| 取值 | 說(shuō)明 |
|---|---|
| static | 默認(rèn)值，靜態(tài)定位，表示沒(méi)有定位，元素會(huì)按照正常的位置顯示，此時(shí) top、bottom、left 和 right 4 個(gè)定位屬性也不會(huì)被應(yīng)用。 |
| relative | 相對(duì)定位，即相對(duì)于元素的正常位置進(jìn)行定位，您可以通過(guò) top、right、bottom、left 這 4 個(gè)屬性來(lái)設(shè)置元素相對(duì)于正常位置的偏移量，在此過(guò)程中不會(huì)對(duì)其它元素造成影響。 |
| absolute | 絕對(duì)定位，相對(duì)于第一個(gè)非 static 定位的父級(jí)元素進(jìn)行定位，可以通過(guò) top、right、bottom、left 這 4 個(gè)屬性來(lái)設(shè)置元素相對(duì)于父級(jí)元素位置的偏移量。如果沒(méi)有滿足條件的父級(jí)元素，則會(huì)相對(duì)于瀏覽器窗口來(lái)進(jìn)行定位。使用絕對(duì)定位的元素不會(huì)對(duì)其它元素造成影響。 |
| fixed | 固定定位，相對(duì)于瀏覽器的創(chuàng)建進(jìn)行定位，可以使用 top、right、bottom、left 這 4 個(gè)屬性來(lái)定義元素相對(duì)于瀏覽器窗口的位置。使用固定定位的元素?zé)o論如何滾動(dòng)瀏覽器窗口元素的位置都是固定不變的。 |
| sticky | 粘性定位，它是 relative 和 fixed 的結(jié)合體，能夠?qū)嵕€類似吸附的效果，當(dāng)滾動(dòng)頁(yè)面時(shí)它的效果與 relative 相同，當(dāng)要滾動(dòng)到屏幕之外時(shí)則會(huì)自動(dòng)變成 fixed 的效果。 |
1. 靜態(tài)定位：static
static 是 position 屬性的默認(rèn)值，表示沒(méi)有定位，使用靜態(tài)定位的元素會(huì)按照元素正常的位置顯示，并且不會(huì)受到 top、bottom、left、right 和 z-index 屬性的影響。示例代碼如下：
postiont: static;
運(yùn)行結(jié)果如下圖所示：
圖：靜態(tài)定位
2. 相對(duì)定位：relative
相對(duì)定位就是元素相對(duì)于自己默認(rèn)的位置來(lái)進(jìn)行位置上的調(diào)整，您可以通過(guò) top、bottom、left 和 right 四個(gè)屬性的組合來(lái)設(shè)置元素相對(duì)于默認(rèn)位置在不同方向上的偏移量。
圖：top、bottom、left、right 屬性演示
【示例】下面通過(guò)代碼來(lái)演示相對(duì)定位的使用：
position: relative;
運(yùn)行結(jié)果如下圖所示：
圖：相對(duì)定位
注意：相對(duì)定位的元素可以移動(dòng)并與其他元素重疊，但會(huì)保留元素默認(rèn)位置處的空間。
3. 絕對(duì)定位：absolute
絕對(duì)定位就是元素相對(duì)于第一個(gè)非靜態(tài)定位（static）的父級(jí)元素進(jìn)行定位，如果找不到符合條件的父級(jí)元素則會(huì)相對(duì)與瀏覽器窗口來(lái)進(jìn)行定位。您同樣可以使用 top、bottom、left 和 right 四個(gè)屬性來(lái)設(shè)置元素相對(duì)于父元素或?yàn)g覽器窗口不同方向上的偏移量。
圖：top、bottom、left、right 屬性在絕對(duì)定位中的使用
使用絕對(duì)定位的元素會(huì)脫離原來(lái)的位置，不再占用網(wǎng)頁(yè)上的空間。與相對(duì)定位相同，使用絕對(duì)定位的元素同樣會(huì)與頁(yè)面中的其它元素發(fā)聲重疊，另外使用絕對(duì)定位的元素可以有外邊距，并且外邊距不會(huì)與其它元素的外邊距發(fā)生重疊。
【示例】下面通過(guò)示例來(lái)演示絕對(duì)定位的使用：
position: absolute;
<p>
運(yùn)行結(jié)果如下圖所示：
圖：絕對(duì)定位
4. 固定定位：fixed
固定定位就是將元素相對(duì)于瀏覽器窗口進(jìn)行定位，使用固定定位的元素不會(huì)因?yàn)闉g覽器窗口的滾動(dòng)而移動(dòng)，就像是固定在了頁(yè)面上一樣，我們經(jīng)常在網(wǎng)頁(yè)上看到的返回頂部按鈕就是使用固定定位實(shí)現(xiàn)的。
【示例】下面通過(guò)示例來(lái)演示固定定位的使用：
position: fixed;
運(yùn)行結(jié)果如下圖所示：
圖：固定定位
5. 粘性定位：sticky
粘性定位與前面介紹的四種定位方式不太一下，它像是相對(duì)定位和固定定位的結(jié)合體，當(dāng)滾動(dòng)頁(yè)面時(shí)它的效果與相對(duì)定位相同，當(dāng)元素滾動(dòng)到一定程度時(shí)它又會(huì)呈現(xiàn)出固定定位的效果。比如一些網(wǎng)頁(yè)上的導(dǎo)航菜單，當(dāng)頁(yè)面加載完成時(shí)它在自己默認(rèn)的位置，當(dāng)我們向下滾動(dòng)頁(yè)面時(shí)它又會(huì)固定在頁(yè)面的最頂端。
【示例】下面通過(guò)示例來(lái)演示粘性定位的使用：
1
2
position: sticky;
4
5
6
7
運(yùn)行結(jié)果如下圖所示：
圖：粘性定位
在使用粘性定位時(shí)，需要注意以下幾點(diǎn)：
- 在設(shè)置
position:sticky;時(shí)，必須再定義 top、bottom、right、left 四個(gè)屬性之一，否則只會(huì)處于相對(duì)定位； - 使用固定定位元素的父元素不能定義
overflow:hidden或者overflow:auto屬性； - 父元素的高度不能低于固定定位元素的高度；
- 固定定位的元素僅在其父元素內(nèi)有效。
網(wǎng)頁(yè)題目：CSSposition定位（5種方式）
URL網(wǎng)址：http://fisionsoft.com.cn/article/cccgojs.html
