CSS之position

carson0408發表於2018-03-19
CSS

         之前已經講了盒子模型，以及行元素塊元素等概念，現在對於佈局來說差的就是定位，所以本文將介紹position的一些屬性特點，從而在為佈局的時候能夠提供幫助。


1.relative

        relative是以網頁的左上角為原點，然後以定義的top、left、right、bottom來確定兩個維度上的正方向，所以下面通過例子來講解：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:relative;
		top:100px;
		left:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body>

<div></div>

 </body>
</html>

檢視效果：


接下來將位置屬性改一下：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:relative;
		bottom:100px;
		right:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body background-color="gray">

<div></div>

 </body>
</html>

得到效果圖：


        根據以上的規律可以知道，以左上角為原點，top表示從上往下為正軸，bottom表示從下往上是正軸，right表示從右往左是正軸，left表示從左往右是正軸。

2.absolute

        absolute與relative最大的區別就是原點會發生改變，而top、bottom、left和right的正軸方向都是在網頁可視範圍內的，比如top是從網頁上端往下、bottom是從網頁下端往上、left是從網頁左端往右、right是從網頁右端往左。因此如果使用right和bottom那麼右下角就是原點，其它同理。以下用例項說明：

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		position:absolute;
		bottom:100px;
		right:50px;
		background-color:red;
	}

	
  </style>
 </head>
 <body>

<div></div>

 </body>
</html>

效果圖如下：


        這裡使用了bottom和right，所以是以左下角為原點的，往上和往左是正軸方向。但是absolute有個特點就是如果有下拉滾動條的，一旦拖動下拉滾動條，塊也會進行滾動，它的絕對體現在相對於初始那個點它是絕對的，一旦拖動滾動條，那個點發生了改變，那麼塊也隨之改變。

3.fixed

        fixed是固定的意思，對於四個方向的座標以及正負軸來說，與absolute是一樣的，區別在於它位置是固定的，甚至下拉滾動條也不能改變它的位置。以下通過示例來區分fixed和absolute的區別。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  body{
	height:3000px;
  }
	div {
		width: 200px;
		height:150px;
		position:fixed;
		bottom:100px;
		right:50px;
		background-color:red;
	}
	.div{
	
		width: 100px;
		height:50px;
		position:absolute;
		bottom:50px;
		right:50px;
		background-color:green;
	
	}

	
  </style>
 </head>
 <body>

<div></div>
<div class="div"></div>

 </body>
</html>

效果圖如下：


        以上紅色塊是代表fixed的，綠色塊是代表absolute的，接下來拖動下拉滾動條，變化如下：


        可以看出紅色塊並未移動，而綠色塊發生了移動，是因為它原本最底下的參考點往上移動了，所以它也跟著往上移動。

4.inherit

        inherit就是繼承的意思，如果它的配置是以父類為基準的，就運算元類重新配置，父類的定位配置也會將其覆蓋。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
	}
	.son{
	
		width: 100px;
		height:50px;
		position:inherit;
		bottom:50px;
		right:50px;
		background-color:green;
	
	}

	
  </style>
 </head>
 <body>

<div></div>
<div class="par"><div class="son"></div></div>

 </body>
</html>

效果如下：



5.z-index

        常規來說後面的塊會覆蓋前面的塊，但是z-index可以改變層級的優先順序，z-index值大的會覆蓋z-index小的層級。例項如下：

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
		position:fixed;
		left:50px;
		top:100px;
		
	}
	.son{
		
		color:green;
		position:fixed;
		left:80px;
		top:130px;
		
	
	}

	
  </style>
 </head>
 <body>

<div class="par"></div>
<div class="son">z-index的用法</div>
 </body>
</html>

效果如下：


        可以看出後面的層會覆蓋前面的層，那麼接下來通過改變z-index的值來改變層的順序。

<!DOCTYPE html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
  
	.par {
		width: 200px;
		height:150px;
		background-color:red;
		position:fixed;
		left:50px;
		top:100px;
		
	}
	.son{
		
		color:green;
		position:fixed;
		left:80px;
		top:130px;
		z-index:-1;
		
	
	}

	
  </style>
 </head>
 <body>

<div class="par"></div>
<div class="son">z-index的用法</div>
 </body>
</html>

效果如下：


        可以看出，文字的z-index比較小會被覆蓋，預設的z-index是0.

相關文章