溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

position屬性值及其特點(diǎn)的案例分析

發(fā)布時(shí)間：2020-08-27 11:09:06 來源：億速云 閱讀：237 作者：小新 欄目：web開發(fā)

position屬性值及其特點(diǎn)的案例分析？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

position定位屬性有四個(gè)屬性值分別為static默認(rèn)值表示沒有定位，relative相對(duì)定位是相對(duì)于本身進(jìn)行定位，absolute絕對(duì)定位是相對(duì)于有定位的父元素進(jìn)行定位，fixed固定定位相對(duì)于瀏覽器窗口定位

今天將要介紹的是CSS中的定位屬性position的各個(gè)屬性值及其特點(diǎn)，具有一定的參考作用，希望對(duì)大家學(xué)習(xí)定位有所幫助

position屬性值及其特點(diǎn)的案例分析

position屬性

position 屬性就是用來規(guī)定元素的定位類型，即把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。因此在position屬性中它有四個(gè)屬性值分別為：static、relative、absolute、fixed。接下來在文章中將具體介紹這四個(gè)屬性值的用法及特點(diǎn)。

static屬性值

static屬性表示默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。忽略了 top, bottom, left, right 或者 z-index 聲明

<style>
div{
	width:100px;
	height:100px;
	border:10px solid #ccc;
}
div.static {
    position: static;
    border: 10px solid pink;
}
</style>
</head>
<body>
	<div></div>
	<div class="static">使用了 position: static;</div>
</body>

效果圖：

position屬性值及其特點(diǎn)的案例分析

relative屬性值

表示相對(duì)定位的元素，可以通過top,bottom,left,right的設(shè)置相對(duì)于其正常（原先本身）位置進(jìn)行定位。它是默認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)來定位的，若無父元素則按照上一個(gè)元素的底部為原始點(diǎn)進(jìn)行定位。

1、相對(duì)定位不會(huì)影響元素本身特性

2、 不會(huì)使元素脫離文檔流（元素原本位置會(huì)被保留）

3、沒有定位偏移量時(shí)對(duì)元素?zé)o影響

4、提升層級(jí)，可以使用z-index來改變一個(gè)定位元素的層級(jí)關(guān)系，從而改變?cè)氐母采w關(guān)系，值越大越在上面

div{
	width:200px;
	height:200px;
	background-color: pink;

}
div.relative {
    position: relative;
   background-color:lightblue;
   left:45px;
}
</style>
</head>
<body>
	<div>父元素
	<div class="relative">子元素</div>
	</div>
</body>

效果圖：

position屬性值及其特點(diǎn)的案例分析

absolute屬性值

表示絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。它的特點(diǎn)有以下幾個(gè)方面

1、 使元素完全脫離文檔流，即在文檔流中不再占位

2、可以改變內(nèi)聯(lián)元素的特性，即在內(nèi)聯(lián)元素中可以設(shè)置寬高

3、使區(qū)塊元素在未設(shè)置寬度時(shí)由內(nèi)容撐開寬度

4、 相對(duì)于最近一個(gè)有定位的父元素偏移，若其父元素沒有定位則逐層上找，直到找到body為止。

5、相對(duì)定位一般配合絕對(duì)定位使用（子絕父相）

<style>
div{
	width:200px;
	height:200px;
	background-color: pink;

}
div.absolute {
    position:absolute;
   background-color:lightblue;
   left:145px;
   top:140px;
}
</style>
</head>
<body>
	<div>父元素
	<div class="absolute">子元素</div>
	</div>

效果圖：

position屬性值及其特點(diǎn)的案例分析

fixed屬性值

表示固定屬性值，生成絕對(duì)定位元素，相對(duì)于瀏覽器窗口進(jìn)行定位。就是無論你怎么滾動(dòng)滾動(dòng)條，元素依舊在那個(gè)位置不動(dòng)

<style>
body{height: 2000px;}
div.fixed {
	width:200px;
	height:200px;
    position:fixed;
   background-color:lightblue;
   left:145px;
   top:140px;
}
</style>
</head>
<body>
	<div class="fixed">固定元素</div>
</body>

效果圖：

position屬性值及其特點(diǎn)的案例分析

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)position屬性值及其特點(diǎn)的案例分析大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手