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

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

</html>

結果圖

現在筆者將h1元素設定為固定定位，看看和上面的結構實踐有什麼區別，然後我們在分析一些固定定位的特點。
程式碼塊

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

結果圖

固定定位特點分析如下：
固定定位，它是相對於瀏覽器視窗進行設定定位，不管頁面如果滾動，固定定位的元素位置不會受到任何影響。
固定定位的元素特點：它已經脫離了標準文件流。
固定定位的元素特點：它的層級比標準文件流的元素要高，所以我們給h1標籤設定了固定定位會壓蓋到div標籤。
固定定位的元素特點：h1標籤在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;
      
     }
    .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: 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元素進行定位。
絕對定位元素的父元素可以是用任何定位包括絕對定位，筆者建議是用相對定位，一般相對定位是配合著絕對定位使用的。

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

CSS中定位介紹 position屬性在英文單詞中表示位置的意思，在CSS中主要作用設定元素的定位。 CSS中一共有3種定位如下：屬性值描述 fixed 設定固定定位。 relative 設定相對定位。 absolute 設定絕對定位。固定定位實踐在實踐固定定位之前我

CSS學習筆記——CSS中定位的浮動float（20171129002）

itl charset ear 浮動元素有效而是 mark 盒模型頁面昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對定位？今天先解決浮動相關的問題，首先列舉出想要解決的問題： 1.浮動到底是怎麽樣的？ 2.浮動對元素的影響有什麽？ 3.浮動主要用來幹

深入理解CSS中的定位（position)

CSS中的定位（position) 　　使用CSS來定位頁面內層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為座標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設計想要的位置，讓人很撓頭。　　其實，要想控制好層的絕對定位，只

深入理解css中的position定位和z-index屬性

注：本文僅供交流使用，如有不當之處歡迎批評指正，但請註明詳由，謝謝！由於平時不太用到，所以過去寫css的時候對於position屬性的absolute、relative值理解比較模糊，對於z-index的層疊更是摸不著頭腦，除了理解的因素外，各個瀏覽器的不同解析結果也是一個大

CSS 中定位方式有幾種，說明他們的意義

sta 對象偏移 nbsp fixed static 進行方式自身 1.static 默認定位方式顯示為沒有設置定位時的位置 2.fixed(固定定位) 他所相對固定的對象是可視窗口，與其他無關。以瀏覽器窗口作為參考進行定位 3.relative(相對定位)

深入理解CSS中的層疊上下文和層疊順序

零、世間的道理都是想通的在這個世界上，凡事都有個先後順序，凡物都有個論資排輩。比方說食堂排隊打飯，對吧，講求先到先得，總不可能一擁而上。再比如說話語權，老婆的話永遠是對的，領導的話永遠是對的。在CSS屆，也是如此。只是，一般情況下，大家歌舞昇平，看不出什麼差異，即所謂的眾生平等。但是，當

WEB學習-CSS中Margin塌陷

margin的塌陷現象標準文件流中，豎直方向的margin不疊加，以較大的為準。　　如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的：　　盒子居中margin:0 auto; margin的

CSS中定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

深入學習Java中的字串,程式碼點和程式碼單元

在Java字串處理時，在使用length和charAt方法時，應該格外小心，因為length返回的是UTF-16編碼表示下的程式碼單元數量，而非我們所認為的字元的個數，charAt方法返回的是指定位置處的程式碼單元，而非我們所認為的字元。至於為什麼都是“程式碼單元”而非字元，這

深入學習Servlet中的監聽器以及用法

在域物件中屬性的變更的事件監聽器就是用來監聽 ServletContext, HttpSession, HttpServletRequest 這三個物件中的屬性變更資訊事件的監聽器。　　　　這三個監聽器介面分別是Servle

深入學習keras中Sequential模型及方法

Sequential 序貫模型　　序貫模型是函式式模型的簡略版，為最簡單的線性、從頭到尾的結構順序，不分叉，是多個網路層的線性堆疊。　　Keras實現了很多層，包括core核心層，Convolution卷積層、Pooling池化層等非常豐富有趣的網路結構。我們可以通過將層的列表傳遞給Sequential

深入理解css中position屬性及z-index屬性

在網頁設計中，position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性，將會給我們帶來很多意想不到的困難。　　position屬性共有四種不同的定位方法，分別是static、fixed、relative、absolute,sticky。最後將會介紹和positio

css中定位功能的特性

它有四大特性,頁面找不到盒子的情況 1.z-index值表示誰壓著誰,數值大的壓蓋數值小的 2.只有定位了的元素,才有z-index.也就是說,不管相對定位,絕對定位,固定定位,都可以使用z-index.而浮動元素不能使用z-index 3.z-index值沒有單位,就是一個正整數.預設的z-inde

CSS中定位元素的重疊

如果在一個頁面中同時使用幾個定位元素，就可能發生定位元素重疊的情況，預設的情況下，後新增的元素會覆蓋先新增的元素，通過使用層疊定位屬性(z-index)，可以調整各個元素的顯示順序。 1. 層疊定位屬性z-index 用來定義定位元素的顯示順序，在

html+css中定位物件

定位有四種：預設位置（static），相對定位（position:relative;），絕對定位（position:absolute;）,固定定位（position:fixed;）。定位用法簡單明瞭，不過定位物件可能存在混淆的情況，以下總結：相對定位相對於文字流中元素定位前所在的位置

深入學習Hibernate4_05hibernate中物件的四種狀態(臨時狀態，持久化狀態，遊離狀態，刪除狀態)，以及常用方法的介紹

是什麼? 站在持久化的角度, Hibernate 把物件分為 4 種狀態: 持久化狀態, 臨時狀態, 遊離狀態, 刪除狀態. Session 的特定方法能使物件從一個狀態轉換到另一個狀態. 臨時物件:1.在使用代理主鍵的情況下，OID通常為null

深入瞭解CSS中盒子模型

CSS中盒子模型介紹什麼是盒子？盒子是用來儲存物品，我們可以將盒子理解為酒盒，酒盒有什麼組成的呢？有酒可以喝、有填充物保護酒防止酒被摔壞、紙盒子。我們怎麼理解CSS中的盒子呢，CSS中盒子有什麼組成的呢？有內容、內邊距、邊框、外邊距。 CSS中盒子的主要屬性有5種如：width寬度、height高度

深入理解CSS絕對定位

CSS中有3種定位機制：普通流，浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。顧名思義，普通流中元素框的位置由HTML元素的位置決定。塊級框一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出。在本文中，我們主要講解3種定位機制之一的絕對定位，這就需要深入瞭解relative（相對定位），

CSS中position定位

fix rip ble 偏移正常 abs css class z-index 定義和用法 position 屬性規定元素的定位類型。說明這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麽類型。相對定位

CSS中的幾種定位簡介

left 出現規則保留絕對定位影響 nbsp view 布局相對於元素在正常情況下出現在頁面文檔流的位置，CSS提供了幾種方法來定位。靜態定位（static）表示按照正常定位方案，元素盒按照在文檔流中出現的順序依次格式化；相對定位（relative）將移動元素

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

CSS中定位介紹

固定定位實踐

相對定位實踐

絕對定位實踐

相關推薦