CSS基礎（五）：定位

時間 2019-12-04

標籤 css 基礎定位欄目 CSS 简体版

原文原文鏈接

CSS定位機制css

CSS 有三種基本的定位機制：相對定位、浮動和絕對定位。html

相對定位url

相對定位指的是設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它本來所佔的空間仍保留。spa

若是將box2的框 top 設置爲 50px，那麼框將在原位置頂部下面 50 像素的地方。若是 left 設置爲 20 像素，那麼會在元素左邊建立 20 像素的空間，也就是將元素向右移動。code

只要box2設置了position爲relative ，box1和box3始終不會由於box2的改變而改變。htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>相對定位</title>
    <style type="text/css">
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          float: left;
          margin:0 0 0 30px;
        }
        .box2
        {
          position: relative;
          left: 20px;
          top: 50px;
        }
    </style>
  </head>

  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box box2">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

浮動blog

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。utf-8

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。文檔

1.當都不設置浮動時：get

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>浮動</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

2.當設置box1向左浮動時，它脫離文檔流而且向左移動，直到它的左邊緣碰到包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了box1 2，使box12 從視圖中消失。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>不設置浮動</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
        }
        .box1
        {
          float:left;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
    </div>
  </body>
</html>

3.當都設置爲浮動時，box1 向左浮動直到碰到包含框，另外兩個box向左浮動直到碰到前一個浮動框。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>不設置浮動</title>
    <style type="text/css">
      #main
      {
        border: 1px solid #000;
        padding:10px;
        overflow: hidden;
      }
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          margin:10px 0 0 30px;
          float: left;
        }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
    </div>
  </body>
</html>

4.清除浮動，要想阻止行框圍繞浮動框，須要對該框應用 clear 屬性。clear 屬性的值能夠是 left、right、both 或 none，它表示框的哪些邊不該該挨着浮動框。

更多請參考

絕對定位

設置爲絕對定位的元素框從文檔流徹底刪除，並相對於其包含塊定位，包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過設置 z-index 屬性來控制這些框的堆放次序。

當設置box2的position爲absolute時，它就會脫離文檔，至關於不存在。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>絕對定位</title>
    <style type="text/css">
      .box
        { 
          width: 200px;
          height:100px;
          border: 1px solid #F00;
          float: left;
          margin:0 0 0 30px;
        }
        .box2
        {
          position: absolute;
          left: 20px;
          top: 50px;
        }
    </style>
  </head>

  <body>
    <div id="main">
      <div class="box">box1</div>
      <div class="box box2">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

做者： ForEvErNoME
出處： http://www.cnblogs.com/ForEvErNoME/
歡迎轉載或分享，但請務必聲明文章出處。若是文章對您有幫助，但願你能推薦或關注

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。