深刻學習CSS中如何使用定位

時間 2019-12-30

標籤深刻學習 css 如何使用定位欄目 CSS 简体版

原文原文鏈接

CSS中定位介紹

position屬性在英文單詞中表示位置的意思，在CSS中主要做用設置元素的定位。
CSS中一共有3種定位以下：

屬性值	描述
fixed	設置固定定位。
relative	設置相對定位。
absolute	設置絕對定位。

固定定位實踐

在實踐固定定位以前咱們先看看代碼結構是什麼樣子的呢。
代碼塊css

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

結果圖html

如今筆者將h1元素設置爲固定定位，看看和上面的結構實踐有什麼區別，而後咱們在分析一些固定定位的特色。spring
代碼塊瀏覽器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      position:fixed;
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 0;
       padding: 0;
     }
     div{
       width: 200px;
       height: 200px;
       background-color:springgreen;
        margin: 0;
        padding: 0;
     }
  </style>
</head>

<body>
   <h1 class="box"></h1>
   <div></div>
</body>

</html>

結果圖ui

固定定位特色分析以下：
固定定位，它是相對於瀏覽器窗口進行設置定位，無論頁面若是滾動，固定定位的元素位置不會受到任何影響。
固定定位的元素特色：它已經脫離了標準文檔流。
固定定位的元素特色：它的層級比標準文檔流的元素要高，因此咱們給h1標籤設置了固定定位會壓蓋到div標籤。
固定定位的元素特色：h1標籤在div標籤之上，因此固定定位的元素已經再也不佔用任何空間。

相對定位實踐

在實踐相對定位以前咱們先看看代碼結構是什麼樣子的呢。
代碼塊3d

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖code

如今筆者將class屬性值爲.div2元素設置爲相對定位，看看和上面的結構實踐有什麼區別，而後咱們在分析一些相對定位的特色。htm
代碼塊blog

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖文檔

注意：在咱們沒有給相對定位設置座標位置，它是不會有任何移動的。
筆者給class屬性值爲div2元素設置定位座標實踐。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position: relative;
       left: 50px;
       top: 50px;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖

相對定位特色分析以下：
相對定位的元素它沒有脫離標準文檔流。
相對定位的元素若是沒有設置座標它會在原地位置。
相對定位的元素設置了座標位置，它會根據原來的位置開始計算移動的位置。
相對定位的元素它比標準文檔流的元素層級要高，會覆蓋標準文檔流中的元素。
相對定位的元素它能夠設置爲負數。

絕對定位實踐

在實踐絕對定位以前咱們先看看代碼結構是什麼樣子的呢。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖

如今筆者將class屬性值爲.div2元素設置爲絕對定位，看看和上面的結構實踐有什麼區別，而後咱們在分析一些絕對定位的特色。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖

注意：絕對定位已經脫離了標準文檔流。
筆者給class屬性值爲div2元素設置定位座標實踐，爲了讓讀者有一個直觀的印象我給最外層的div元素設置了居中對齊。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       left:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖

注意：絕對定位元素爲何會出如今瀏覽器左邊緣呢，絕對定位移動原理：絕對定位的元素它會尋找父元素是否有定位，若是有定位它會根據父元素進行定位，若是父元素沒有設置定位，它會在找父元素的父元素是否有定位，以此類推直到body元素就中止了，由於body元素就是瀏覽器的位置，說了這麼多筆者給新學者一個直觀的印象，那我們就實踐見真招。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>定位</title>
  <style>
     .box{
      width: 400px;
      height: 300px;
      border:  1px solid darkorange;
      margin: 0px auto;
      position: relative;
      
     }
    .box div{
       width: 100px;
       height: 100px;
     }
     .div1{
       background-color: red;
     }
     .div2{
       background-color: slateblue;
       position:absolute;
       right:0px ;
     }
     .div3{
       background-color: springgreen;
     }
  </style>
</head>

<body>
   <div class="box">
     <div  class="div1"></div>
     <div class="div2"></div>
     <div class="div3"></div>
   </div>
</body>

</html>

結果圖

注意：如今筆者給絕對定位座標更換成了向右定位，父元素設置了一個相對定位，在這裏就很少進行實踐了，若是定位的父元素的父元素也就是爺爺的元素，父元素和爺爺元素同時都設置了定位，該元素會根據父元素決定定位而不是爺爺元素。
絕對定位特色分析以下：
絕對定位元素它已經脫離了標準文檔流。
絕對定位元素它會覆蓋掉標準文檔流的元素。
絕對定位元素它已經再也不佔用任何空間了。
絕對定位元素它根據父元素之祖先元素之間是否有定位，若是有根據最近元素進行設置定位的位置，若是沒有根據body元素進行定位。
絕對定位元素的父元素能夠是用任何定位包括絕對定位，筆者建議是用相對定位，通常相對定位是配合着絕對定位使用的。