天天看點

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

本文是HTML及CSS課程的第九課。定位,既是将元素放置于界面的什麼位置。本文主要介紹使用

position

定位屬性給元素設定定位的幾種方式,及關于定位的其他幾點問題

文章目錄

  • 一、定位的概念
    • 1、定位是什麼
    • 2、定位怎麼實作
  • 二、常見定位方式
    • 1、相對定位
    • 2、絕對定位
    • 3、固定定位
    • 4、粘性定位
  • 三、關于定位的其他幾點問題
    • 1、浮動元素定位
    • 2、行級元素定位
    • 3、設定元素的堆疊順序

一、定位的概念

1、定位是什麼

定位,既是将元素放置于界面的什麼位置。定位的基本思想很簡單,它允許我們定義元素相對于其正常位置,或者相對于最近的已定位父元素,甚至浏覽器視窗的位置。

2、定位怎麼實作

在CSS中,我們通過

position

屬性實作元素的定位。

position

屬性及值的說明如下:

屬性及值 說明

position: relative;

元素相對于其正常位置進行定位

position: absolute;

元素相對于最近的已定位父元素進行定位

position: fixed;

元素相對于浏覽器視窗定位

position: sticky;

預設值。元素不浮動,按正常文檔流顯示

position: static;

預設值,即沒有定位,元素遵循正常的文檔流

說明:

  • static

    position

    屬性的預設值,元素會遵循正常的文檔流。當某個元素設定了樣式屬性

    position

    并且屬性值不為

    static

    時,我們稱該元素為一個定位元素。

二、常見定位方式

1、相對定位

當元素的樣式屬性

position

值為

relative

時,表明該元素會進行相對定位。元素會相對于文檔流中的原來位置進行偏移。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 相對定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-relative {height: 50px; width: 200px; border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-relative">相對定位的div</div>
    <div class="d-normal">正常的div</div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 相對定位的元素仍然會占據自己在正常的文檔流中的位置。周圍其他元素位置并不受影響。
  • 相對定位的元素,偏移量由

    top

    left

    bottom

    right

    四個屬性的值決定。

    top: 5px;

    使元素相對于原來的位置上方空出5像素,

    left: 20px;

    使元素相對于原來的位置左方空出20像素。
  • top

    bottom

    屬性同時設定時,

    bottom

    屬性并不起作用;

    left

    right

    屬性同時設定時,

    right

    屬性并不起作用。
  • 如果你想讓一個元素變成定位元素,并且不改變它在文檔流中的位置,那麼,設定它的

    position

    樣式屬性為

    relative

2、絕對定位

當元素的樣式屬性

position

值為

absolute

時,表明該元素會進行絕對定位。元素會脫離原來的文檔流,相對于最近的已定位父元素進行偏移。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 絕對定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d-parent {height: 250px; width: 250px; border: 10px solid lightgreen; position: relative;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-absolute {height: 50px; width: 200px; border: 10px solid lightgreen; position: absolute; bottom: 5px; right: 5px;}
    </style>
  </head>
  <body>
    <div class="d-parent">
      <div class="d-normal">正常的div</div>
      <div class="d-absolute">絕對定位的div</div>
      <div class="d-normal">正常的div</div>
    </div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 絕對定位的元素将脫離原來的文檔流。周圍其他元素會忽略絕對定位元素。
  • 絕對定位的元素,偏移量仍然由

    top

    left

    bottom

    right

    四個屬性的值決定。

    bottom: 5px;

    使元素相對于最近的已定位父元素下方空出5像素,

    right: 5px;

    使元素相對于最近的已定位父元素右方空出5像素。
  • 絕對定位元素的位置相對于最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對于最初的包含塊(可能是畫布或

    <html>

    标簽)。

3、固定定位

當元素的樣式屬性

position

值為

fixed

時,表明該元素會進行固定定位。元素也會脫離原來的文檔流,相對于浏覽器視窗定位,看起來就像元素固定在浏覽器的視窗上,不論如何滾動頁面,它都不會移動。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 固定定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      body {height: 1000px;}
      .d-normal {height: 100px; width: 100px; border: 10px dotted lightsalmon;}
      .d-fixed {height: 120px; width: 120px; border: 10px solid lightgreen; position: fixed; top: 50px; left: 50px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-fixed">固定定位的div</div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 固定定位的元素也會脫離原來的文檔流。周圍其他元素會忽略固定定位元素。
  • 固定定位的元素,偏移量仍然由

    top

    left

    bottom

    right

    四個屬性的值決定。

    top: 50px;

    使元素相對于浏覽器視窗上方空出50像素,

    left: 50px;

    使元素相對于浏覽器視窗左方空出50像素。
  • 無論使用者如何拖曳浏覽器上的滾動條,固定定位的元素都不會跟着移動。

4、粘性定位

當元素的樣式屬性

position

值為

sticky

時,表明該元素會進行粘性定位。粘性定位的元素是依賴于使用者的滾動,在

position:relative

position:fixed

定位之間切換。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 粘性定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      body {height: 1000px;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .d-sticky {height: 50px; width: 200px; border: 10px solid lightgreen; position: sticky; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <div class="d-sticky">粘性定位的div</div>
    <div class="d-normal">正常的div</div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 當浏覽器視窗中包含目标區域時,粘性定位元素的行為和相對定位

    position:relative

    一樣; 而當頁面滾動超出目标區域時,它的表現就像固定定位

    position:fixed

    ,固定在浏覽器視窗的目标位置。
  • 粘性定位的元素,偏移量仍然由

    top

    left

    bottom

    right

    四個屬性的值決定。

    top: 5px;

    使元素相對于原來的位置(或浏覽器視窗)上方空出5像素,

    left: 20px;

    使元素相對于原來的位置(或浏覽器視窗)左方空出20像素。

三、關于定位的其他幾點問題

1、浮動元素定位

這裡示範當一個元素已經設定浮動後,再設定定位屬性會有什麼效果。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 給浮動元素設定定位 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
      .d-position {position: relative; top: 20px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d1">向左浮動</div>
    <div class="d2 d-position">向左浮動,同時定位</div>
    <div class="d3">向左浮動</div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 當一個元素為浮動元素,同時設定定位屬性時,元素仍然遵守相應的定位規則,相對于其浮動位置,或者最近的已定位父元素,或者浏覽器視窗的位置進行定位。

2、行級元素定位

這裡示範給行标簽設定定位屬性的效果。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行級元素定位 </title>
    <style>
      body {height: 1000px;}
      * {margin: 0; border: 0; padding: 0;}
      .d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
      .span-relative {border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
    </style>
  </head>
  <body>
    <div class="d-normal">正常的div</div>
    <span class="span-relative">相對定位的span</span>
    <div class="d-normal">正常的div</div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 給行級标簽設定定位屬性,元素仍然遵守相應的定位規則。行級元素定位後并不會變成塊級元素。

3、設定元素的堆疊順序

元素經過定位後,有可能顯示在浏覽器視窗中時出現位置重疊的現象,預設情況下,在HTML檔案中後出現的元素将會覆寫前面的元素。我們可以通過CSS中的

z-index

屬性調整元素的堆疊順序。

下面是一個示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 調整元素的堆疊順序 </title>
    <style>
      * {margin: 0; border: 0; padding: 0;}
      .d1, .d2 {width: 100px; height: 100px; position: relative;}
      .d1 {background-color: lightgreen; z-index: 1;}
      .d2 {background-color: lightsalmon; top: -50px; left: 50px;}
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2"></div>
  </body>
</html>
           

頁面浏覽效果:

HTML及CSS學習筆記 09 - 定位一、定位的概念二、常見定位方式三、關于定位的其他幾點問題

說明:

  • 樣式屬性

    z-index

    的屬性值一般設定一個整數,該整數值越大,表示元素離我們的視線越近。
  • 樣式屬性

    z-index

    隻能用在定位元素上。