css有幾種定位-前端問答-PHP中文網

首頁

web前端

前端問答

css有幾種定位

青灯夜游

Apr 02, 2021 pm 06:01 PM

css定位

css有4種定位方式，分別為靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）；定位有不同的參數，例如left、right、 top、bottom、z-index等。

css有幾種定位

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS中的定位使用來佈局的熟練應用對頁面美化有很好的幫助，css有4種定位方式，分別為：靜態定位，相對定位，絕對定位，固定定位，定位有不同的參數，例如：left、right、top、bottom、z-index等。

1、靜態定位（static）

一般的標籤元素不加任何定位屬性都屬於靜態定位，在頁面的最底層屬於標準流。

2、絕對定位（absolute）

絕對定位的元素從文件流中拖出，使用left、right、top、bottom等屬性相對於其最接近的一個最有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定位屬性，則依據body 元素左上角作為參考進行定位。絕對定位元素可層疊，層疊順序可由 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。

絕對定位的定位方法：如果它的父元素設定了除static之外的定位，例如position:relative或position:absolute及position:fixed，那麼它就會相對於它的父元素來定位，位置透過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文檔body來定位（並非相對於瀏覽器窗口，相對於窗口定位的是fixed）。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

將class="two"的p定位到距離

的頂部和左側分別50px的位置。會改變其他元素的佈局，不會在這個元素本來位置留下空白。

（學習影片分享：css影片教學）

3、相對定位（relative）

相對定位元素不可層疊，依據left、right、top、bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。

<head>
	<style type="text/css">
		.box {
			background: red;
			width: 100px;
			height: 100px;
			float: left;
			margin: 5px;
		}
		.two {
			position: relative;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="box" >One</div>
	<div class="box  two" >Two</div>
	<div class="box" >Three</div>
	<div class="box">Four</div>
</body>

將class="two"的p定位到距離它本來位置的頂部和左側分別50px的位置。不會改變其他元素的佈局，會在這個元素本來位置留下空白。

4、固定定位（fixed）

固定定位與絕對定位類似，但它是相對於瀏覽器視窗定位，並且不會隨著滾動條進行滾動。

固定定位的最常見的一種用途是在頁面中建立一個固定頭部、固定腳部或固定側邊欄，不需要使用margin、border、padding。

5、絕對定位vs相對定位

絕對定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文本流放在首層)，它們之間互不影響；相對定位元素在首層，與文字流一起存放，它們之間互相影響。

被設定了絕對定位的元素，在文件流程中是不佔據空間的，如果某元素設定了絕對定位，那麼它在文件流程中的位置會被刪除，它浮了起來，其實設定了相對定位也會讓元素浮起來，但它們的不同點在於，相對定位不會刪除它本身在文檔流中佔據的空間，其他元素不可以佔據該空間，而絕對定位則會刪除掉該元素在文檔流程中的位置，使其完全從文檔流程中抽了出來，其他元素可以佔據其空間，可以透過z-index來設定它們的堆疊順序。

更多程式相關知識，請造訪：程式設計影片！！

以上是css有幾種定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn