深入學(xué)習(xí)CSS中如何使用定位(小結(jié))

發(fā)布時(shí)間：2019-12-30 16:34:44 作者：返回主頁微笑是最初的信仰

這篇文章主要介紹了深入學(xué)習(xí)CSS中如何使用定位(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

CSS中定位介紹

position 屬性在英文單詞中表示 位置 的意思，在 CSS 中主要作用設(shè)置元素的定位。

CSS 中一共有 3 種定位如下：

屬性值	描述
fixed	設(shè)置固定定位。
relative	設(shè)置相對(duì)定位。
absolute	設(shè)置絕對(duì)定位。

固定定位實(shí)踐

在實(shí)踐固定定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。

代碼塊

<!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>

結(jié)果圖

現(xiàn)在筆者將 h1 元素設(shè)置為固定定位，看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別，然后我們?cè)诜治鲆恍┕潭ǘㄎ坏奶攸c(diǎn)。

代碼塊

<!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>

結(jié)果圖

固定定位特點(diǎn)分析如下：

固定定位，它是相對(duì)于瀏覽器窗口進(jìn)行設(shè)置定位，不管頁面如果滾動(dòng)，固定定位的元素位置不會(huì)受到任何影響。
固定定位的元素特點(diǎn)：它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
固定定位的元素特點(diǎn)：它的層級(jí)比標(biāo)準(zhǔn)文檔流的元素要高，所以我們給h1標(biāo)簽設(shè)置了固定定位會(huì)壓蓋到div標(biāo)簽。
固定定位的元素特點(diǎn)：h1標(biāo)簽在div標(biāo)簽之上，所以固定定位的元素已經(jīng)不再占用任何空間

相對(duì)定位實(shí)踐

在實(shí)踐相對(duì)定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。

代碼塊

<!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>

結(jié)果圖

現(xiàn)在筆者將 class 屬性值為 .div2 元素設(shè)置為相對(duì)定位，看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別，然后我們?cè)诜治鲆恍┫鄬?duì)定位的特點(diǎn)。

代碼塊

<!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>

結(jié)果圖

注意：在我們沒有給相對(duì)定位設(shè)置坐標(biāo)位置，它是不會(huì)有任何移動(dòng)的。

筆者給 class 屬性值為 div2 元素設(shè)置定位坐標(biāo)實(shí)踐。

代碼塊

<!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>

結(jié)果圖

相對(duì)定位特點(diǎn)分析如下：

相對(duì)定位的元素它沒有脫離標(biāo)準(zhǔn)文檔流。
相對(duì)定位的元素如果沒有設(shè)置坐標(biāo)它會(huì)在原地位置。
相對(duì)定位的元素設(shè)置了坐標(biāo)位置，它會(huì)根據(jù)原來的位置開始計(jì)算移動(dòng)的位置。
相對(duì)定位的元素它比標(biāo)準(zhǔn)文檔流的元素層級(jí)要高，會(huì)覆蓋標(biāo)準(zhǔn)文檔流中的元素。
相對(duì)定位的元素它可以設(shè)置為負(fù)數(shù)。

絕對(duì)定位實(shí)踐

在實(shí)踐絕對(duì)定位之前我們先看看代碼結(jié)構(gòu)是什么樣子的呢。

代碼塊

<!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>

結(jié)果圖

現(xiàn)在筆者將 class 屬性值為 .div2 元素設(shè)置為絕對(duì)定位，看看和上面的結(jié)構(gòu)實(shí)踐有什么區(qū)別，然后我們?cè)诜治鲆恍┙^對(duì)定位的特點(diǎn)。

代碼塊

<!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>

結(jié)果圖

注意：絕對(duì)定位已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。

筆者給 class 屬性值為 div2 元素設(shè)置定位坐標(biāo)實(shí)踐，為了讓讀者有一個(gè)直觀的印象我給最外層的 div 元素設(shè)置了居中對(duì)齊。

代碼塊

<!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>

結(jié)果圖

注意：絕對(duì)定位元素為什么會(huì)出現(xiàn)在瀏覽器左邊緣呢，絕對(duì)定位移動(dòng)原理：絕對(duì)定位的元素它會(huì)尋找父元素是否有定位，如果有定位它會(huì)根據(jù)父元素進(jìn)行定位，如果父元素沒有設(shè)置定位，它會(huì)在找父元素的父元素是否有定位，以此類推直到 body 元素就停止了，因?yàn)?body 元素就是瀏覽器的位置，說了這么多筆者給新學(xué)者一個(gè)直觀的印象，那咱們就實(shí)踐見真招。

代碼塊

<!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>

結(jié)果圖

注意：現(xiàn)在筆者給絕對(duì)定位坐標(biāo)更換成了向右定位，父元素設(shè)置了一個(gè)相對(duì)定位，在這里就不多進(jìn)行實(shí)踐了，如果定位的父元素的父元素也就是爺爺?shù)脑?，父元素和爺爺元素同時(shí)都設(shè)置了定位，該元素會(huì)根據(jù)父元素決定定位而不是爺爺元素。

絕對(duì)定位特點(diǎn)分析如下：

絕對(duì)定位元素它已經(jīng)脫離了標(biāo)準(zhǔn)文檔流。
絕對(duì)定位元素它會(huì)覆蓋掉標(biāo)準(zhǔn)文檔流的元素。
絕對(duì)定位元素它已經(jīng)不再占用任何空間了。
絕對(duì)定位元素它根據(jù)父元素之祖先元素之間是否有定位，如果有根據(jù)最近元素進(jìn)行設(shè)置定位的位置，如果沒有根據(jù)body元素進(jìn)行定位。
絕對(duì)定位元素的父元素可以是用任何定位包括絕對(duì)定位，筆者建議是用相對(duì)定位，一般相對(duì)定位是配合著絕對(duì)定位使用的

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。