07/24 CSS中position總結

時間 2019-11-08

標籤 css position 總結欄目 CSS 简体版

原文原文鏈接

咱們經常使postion用於層的定位，有時一個佈局中有幾個小對象，不易用css padding margin進行定位，這個時候咱們就可使用position的absolute、relative（絕對定位、相對定位）來輕鬆搞定。特別是一個盒子裏有幾個小盒子不規律的佈局，這個時候使用position定位很是方便佈局。css

1、postion語法：html

position：static absolute relativeapp

static：無特殊定位，對象遵循html定位規則。工具

absolute：將對象從文檔流中拖出，使用left、right、top、bottom等屬性相對於其最接近的一個具備定位設置的父對象進行絕對定位。若是不存在這樣的對象，則依據body對象。而其層疊經過z-index屬性來設置。若是沒有設置left、right、top、bottom，那麼會將使用它默認的屬性，將聽從正常的html佈局的規則來進行佈局。佈局

relative:relative會保持對象在正常的html流中，生成相對定位，相對於其正常位置進行定位，left:20,會向元素的left位置添加20px。在相對定位對象以後的文本或對象佔有他們本身的空間而不會覆蓋被定位對象的天然空間。top、right、bottom、left的值設置爲正值時，元素向內收縮，設置爲負值時，向外擴張。post

2、position的實際用處學習

絕對定位position用於定位盒子對象，有時一個佈局中幾個小對象，不易用css padding 、css margin進行相對定位，這個時候咱們就可使用絕對定位來輕鬆搞定。特別是一個盒子裏幾個小盒子不規律的佈局。相似這種的網站

3、絕對定位使用條件ui

position：absolute。絕對定位使用一般是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，而且子級使用left或right或top或bottom進行絕對定位。url

4、絕對定位案例：

如圖：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
	<style type="text/css">
		*{margin:0px; padding:0px;}
		body{
			font-size:14px;
		}
		ul{list-style:none;}
		a{list-style:none; text-decoration:none; color:#fff;}
		a:hover{
			color:red;
			cursor:pointer;
		}
		ul{margin-top:10px;}
		ul li{line-height:1.5em;}
		#wrapper{
			width:610px;
			height:559px;
			margin:0px auto;
			background:url(bg.jpg) no-repeat;
			position:relative;
		}
		.box1{
			width:156px;
			height:134px;
			position:absolute;
			left:198px;
			top:16px;
			font-size:12px;
			color:#fff;
		}
		.box2{
			width:156px;
			height:134px;
			position:absolute;
			left:24px;
			bottom:67px;
			
		}
		.box2 ul{
			margin-left:5px;
		}
		.box3{
			width:156px;
			height:134px;
			position:absolute;
			right:5px;
			bottom:115px;
		}
		
		h3.title{height:32px; line-height:32px; font-size:bold; text-align:left;}
	</style>
</head>

<body>
	<div id="wrapper">
		<div class="box1">
			<h3 class="title">新聞動態</h3>
			<ul>
				<li><a href="#">不會程序能學會CSS嗎？</a></li>
				<li><a href="#">DIVCSS學習難嗎？</a></li>
				<li><a href="#">我要參加DIVCSS5的培訓</a></li>
				<li><a href="#">我要參加DIVCSS5的培訓</a></li>
				<li><a href="#">jQuery因此版本集合整理</a></li>
			</ul>
		</div>
		<div class="box2">
			<h3 class="title">DIVCSS5欄目</h3>
			<ul>
				<li><a href="#">CSS基礎教程</a></li>
				<li><a href="#">HTML基礎教程</a></li>
				<li><a href="#">CSS問題</a></li>
				<li><a href="#">CSS製做工具</a></li>
				<li><a href="#">DIV CSS技巧</a></li>
				<li><a href="#">DIV+CSS+JS特效</a></li>
			</ul>
		</div>
		<div class="box3">
			<h3>網站欄目</h3>
			<ul>
				<li><a href="#">DIV CSS入門</a></li>
				<li><a href="#">HTML入門教程</a></li>
				<li><a href="#">CSS問題</a></li>
				<li><a href="#">CSS製做工具</a></li>
				<li><a href="#">DIV CSS技巧</a></li>
				<li><a href="#">DIV+CSS+JS特效</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

5、css絕對定位總結

咱們使用position:absolute；position：relative進行絕對定位，經過css進行定義定位，注意什麼地方使用position：relative，什麼地方使用position:absolute進行定位，同時不要忘記使用left、right、top、bottom的配合定位具體位置。絕對定位若是父級不使用position:relative ,或者使用position:absolute進行定位，這個時候會以body爲父級。

在絕對定位時候咱們可使用z-index定義層重疊順序。

同時left、right、bottom、top的值，可使用ps切片工具獲取準確數值。