App下載

網(wǎng)頁中怎么使用css進行定位？定位有幾種方法？

猿友 2021-06-01 17:50:20 瀏覽數(shù) (3353)
反饋

在HTML中我們時常會遇到不同的問題，今天我們就來說說在”網(wǎng)頁中怎么使用 css 進行定位”和“定位有幾種方法”，小編在網(wǎng)上進行搜索中發(fā)現(xiàn)，用于 CSS 中有關(guān)于定位的方法有這么三種。

方法一：
絕對定位（absolute）：

在我們使用這個絕對定位中元素會脫離我們的文檔流，而且如果我們在樣式中設(shè)置偏移量的話還會影響網(wǎng)頁中其他元素的位置，代碼和截圖如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;}
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對定位</div>
	</body>
</html>

絕對定位

方法二：
相對定位（relitive）：

相對定位是一個相對于原來的位置進行一個移動，而且當(dāng)我們在使用的時候設(shè)置這個元素屬性的話不會影響其他的元素布局。代碼截圖如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;
			}
			.po_two_box{
				width: 200px;
				height: 150px;background-color: cornflowerblue;
				top:180px; left:80px;  font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}			
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對定位</div>
		<div class="po_two_box">我是相對定位</div>
	</body>
</html>

相對定位

方法三：
固定定位（fixed）：

固定定位這個方法是指當(dāng)我們一個元素被固定之后不會因為滾動條的一個改變而且發(fā)生改變位置，而且我們在使用這個方法的時候使用

?position:fixed;?來實現(xiàn)的。代碼截圖如下： 

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;
			}
			.po_two_box{
				width: 200px;
				height: 150px;background-color: cornflowerblue;
				top:180px; left:80px;  font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}
			.po_three_box{
				width: 200px;
				height: 150px;background-color: bisque;
				top:280px; left:280px; font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對定位</div>
		<div class="po_two_box">我是相對定位</div>
		<div class="po_three_box">我是固定定位</div>
	</body>
</html>

我是固定定位

總結(jié)：

當(dāng)我們在使用定位的使用小編這邊建議大家在使用絕對定位的時候盡量配合固定定位一起使用，最好不要單獨的使用絕對定位以免發(fā)生頁面布局錯亂和其他的問題。以上就是小編的一個經(jīng)驗分享，更多的html知識我們都可以在w3cschool這個平臺中進行學(xué)習(xí)噢！


HTML CSS 編程基礎(chǔ)

0 人點贊