相對定位與絕對定位

時間 2020-05-20

原文原文鏈接

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #test1{
    width:400px;
    height:400px;
    background:green;
   }
   p{
    margin:0px;
    padding:0px;
   }
   #p1{
    width:100px;
    height:100px;
    background:red;
   }
   #p2{
    width:100px;
    height:100px;
    background:orange;
   }
  </style>
 </head>
 <body>
  <div id="test1">
   <p id="p1">相對定位是指元素在其正常的位置，偏移某些像素</p>
   <p id="p2">相對定位是指元素在其正常的位置，偏移某些像素</p>
  </div>
 </body>
</html>

未添加相對定位偏移屬性：html

添加屬性後：ide

   #p1{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    top:20px;
    left:20px;
   }

若是要改變偏移方向只需直接更改偏移的方向便可，如：3d

   #p1{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    /*top:20px;
    left:20px;*/
    right:20px;
    bottom:20px;
   }

絕對定位：htm

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #test1{
    width:400px;
    height:400px;
    background:green;
   }
   p{
    margin:0px;
    padding:0px;
   }
   #p1{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    /*top:20px;
    left:20px;*/
    right:20px;
    bottom:20px;
   }
   #p2{
    width:100px;
    height:100px;
    background:orange;
   }
   #test2{
    width:400px;
    height:400px;
    background:blue;
   }
   #p3{
    width:100px;
    height:100px;
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1">
   <p id="p1">相對定位是指元素在其正常的位置，偏移某些像素</p>
   <p id="p2">相對定位是指元素在其正常的位置，偏移某些像素</p>
  </div>
  <div id="test2">
   <p id="p3">絕對定位相對於父元素的top,left,right,bottom來定位</p>
  </div>
 </body>
</html>

未寫入絕對定位屬性的效果：blog

寫入絕對定位：utf-8

   #p3{
    width:100px;
    height:100px;
    background:gray;
    position:absolute;
    top:20px;
    left:30px;
   }

上面的效果爲何是這樣的呢，由於用絕對定位時父元素要求有position屬性才行，不然將依據父的父....一直到body，哪一個祖先有position屬性，相對哪一個祖先，若是都沒有則相對於body。那麼咱們就爲代碼中的p3父元素設置一個position屬性：it

   #p3{
    width:100px;
    height:100px;
    background:gray;
    position:absolute;
    top:20px;
    left:30px;
   }

若是再添加一塊的話會是什麼效果呢：io

   #p4{
    width:100px;
    height:100px;
    background:pink;
    position:absolute;
    top:30px;
    left:40px;
   }
  </style>
 </head>
 <body>
   <p id="p4"></p>
  </div>
 </body>
</html>

新增的粉紅塊漂浮在了灰塊上方，那麼要是想讓灰塊漂浮在粉塊上方呢，能夠用到一個屬性z-index：取的值越大，哪塊就會在上方效果以下：class

   #p3{
    width:100px;
    height:100px;
    background:gray;
    position:absolute;
    top:20px;
    left:30px;
    z-index:10000;
   }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。