溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS中怎么使用定位

發(fā)布時間：2022-03-11 15:08:34 來源：億速云 閱讀：142 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下CSS中怎么使用定位的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

CSS中定位介紹

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

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

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

固定定位實踐

  • 在實踐固定定位之前我們先看看代碼結構是什么樣子的呢。

  • 代碼塊

<!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>
   <h2 class="box"></h2>
   <div></div>
</body>

</html>

  • 結果圖

CSS中怎么使用定位

  • 現(xiàn)在筆者將h2元素設置為固定定位，看看和上面的結構實踐有什么區(qū)別，然后我們在分析一些固定定位的特點。

  • 代碼塊

<!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>
   <h2 class="box"></h2>
   <div></div>
</body>

</html>

  • 結果圖

CSS中怎么使用定位

  • 固定定位特點分析如下：

  • 固定定位，它是相對于瀏覽器窗口進行設置定位，不管頁面如果滾動，固定定位的元素位置不會受到任何影響。

  • 固定定位的元素特點：它已經(jīng)脫離了標準文檔流。

  • 固定定位的元素特點：它的層級比標準文檔流的元素要高，所以我們給h2標簽設置了固定定位會壓蓋到div標簽。

  • 固定定位的元素特點：h2標簽在div標簽之上，所以固定定位的元素已經(jīng)不再占用任何空間。

相對定位實踐

  • 在實踐相對定位之前我們先看看代碼結構是什么樣子的呢。

  • 代碼塊

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

  • 結果圖

CSS中怎么使用定位

  • 現(xiàn)在筆者將class屬性值為.div2元素設置為相對定位，看看和上面的結構實踐有什么區(qū)別，然后我們在分析一些相對定位的特點。

  • 代碼塊

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

  • 結果圖

CSS中怎么使用定位

  • 注意：在我們沒有給相對定位設置坐標位置，它是不會有任何移動的。

  • 筆者給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>

  • 結果圖

CSS中怎么使用定位

  • 相對定位特點分析如下：

  • 相對定位的元素它沒有脫離標準文檔流。

  • 相對定位的元素如果沒有設置坐標它會在原地位置。

  • 相對定位的元素設置了坐標位置，它會根據(jù)原來的位置開始計算移動的位置。

  • 相對定位的元素它比標準文檔流的元素層級要高，會覆蓋標準文檔流中的元素。

  • 相對定位的元素它可以設置為負數(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;
     }
     .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>

  • 結果圖

CSS中怎么使用定位

  • 現(xiàn)在筆者將class屬性值為.div2元素設置為絕對定位，看看和上面的結構實踐有什么區(qū)別，然后我們在分析一些絕對定位的特點。

  • 代碼塊

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

  • 結果圖

CSS中怎么使用定位

  • 注意：絕對定位已經(jīng)脫離了標準文檔流。

  • 筆者給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>

  • 結果圖

CSS中怎么使用定位

  • 注意：絕對定位元素為什么會出現(xiàn)在瀏覽器左邊緣呢，絕對定位移動原理：絕對定位的元素它會尋找父元素是否有定位，如果有定位它會根據(jù)父元素進行定位，如果父元素沒有設置定位，它會在找父元素的父元素是否有定位，以此類推直到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>

  • 結果圖

CSS中怎么使用定位

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

  • 絕對定位特點分析如下：

  • 絕對定位元素它已經(jīng)脫離了標準文檔流。

  • 絕對定位元素它會覆蓋掉標準文檔流的元素。

  • 絕對定位元素它已經(jīng)不再占用任何空間了。

  • 絕對定位元素它根據(jù)父元素之祖先元素之間是否有定位，如果有根據(jù)最近元素進行設置定位的位置，如果沒有根據(jù)body元素進行定位。

  • 絕對定位元素的父元素可以是用任何定位包括絕對定位，筆者建議是用相對定位，一般相對定位是配合著絕對定位使用的。

以上就是“CSS中怎么使用定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

css
AI
助
手