閱讀(15.5k) 書簽贊(8) 我要糾錯(cuò)

CSS Position定位

2018-10-27 17:33 更新

我們可以使用position屬性設(shè)置元素的位置。

元素的位置也由頂部，底部，左側(cè)和右側(cè)屬性控制。

但是，除非先設(shè)置position屬性，否則這些屬性將不起作用。

它們也根據(jù)不同的位置值工作。

允許的值為：

static - 布局正常。這是默認(rèn)值。
relative - 相對(duì)于其正常位置定位。
absolute - 相對(duì)于其具有非靜態(tài)位置值的其第一祖先定位。
fixed - 相對(duì)于瀏覽器窗口定位。

您可以使用top，bottom，left和right屬性將元素從position屬性指定的元素中移除。

以下代碼演示了不同值的效果。

<!DOCTYPE HTML>
<html>
<head>
<style>
img {
  top: 5px;
  left: 150px;
  border: medium double black;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <p>This is a test.</p>
  <img id="myID" src="http://www.o2fo.com/style/download.png"/>
  <p>This is a test.</p>
  <p>
    <button>Static</button>
    <button>Relative</button>
    <button>Absolute</button>
    <button>Fixed</button>
  </p>
  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        document.getElementById("myID").style.position = e.target.innerHTML;
      };
    }
  </script>
</body>
</html>

上面的代碼呈現(xiàn)如下：

靜態(tài)定位

默認(rèn)情況下，HTML元素位于靜態(tài)。

靜態(tài)定位元素根據(jù)頁面的正常流動(dòng)定位。

靜態(tài)定位元素不受頂部，底部，左側(cè)和右側(cè)屬性的影響。

靜態(tài)定位元素根據(jù)頁面的正常流動(dòng)定位。

在下面的HTML代碼中，第1個(gè)是固定定位的，其余??的三個(gè)div元素是靜態(tài)定位的。靜態(tài)位置處于正常流動(dòng)中，固定不在正常流動(dòng)中。

<!DOCTYPE HTML>
<html>
<head>
  <style>
.myStyle {
  position: static;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 200px;
  background-color:red;
}

.different {

  position: fixed;
  top: 0px;
  left: 80px;
  padding: 10px;
  margin: 5px;
  background-color:yellow;
  border: 1px solid #000;
  width: 20%;
}

  </style>
</head>
<body>
  <div class="different">1</div>
  <div class="myStyle">2</div>
  <div class="myStyle">3</div>
  <div class="myStyle">4</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

固定定位

當(dāng)您使用固定值時(shí)，元素將相對(duì)于瀏覽器窗口放置。元素占據(jù)相同的位置，即使內(nèi)容的其余部分向上或向下滾動(dòng)。

注意：僅當(dāng)指定了！DOCTYPE 時(shí)，IE7和IE8才支持固定值。

固定元素從正常流中移除。固定定位的元素可以與其他元素重疊。

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
    color: red;
}
</style>
</head>
<body>
    <p>Some text</p>
    <p class="pos_fixed">Some positioned text.</p>
</body>
</html>

固定元件從正常流中移除。
文檔和其他元素的行為就像固定定位元素不存在。
固定定位的元素可以與其他元素重疊。

例子

下面的代碼將html body的高度設(shè)置為2000px，這使得滾動(dòng)條可見。我們可以滾動(dòng)滾動(dòng)條來查看固定位置的div元素是否移動(dòng)。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html, body {
                height: 2000px;   
            }
            div {
                position: fixed;
                padding: 10px;
                border: 1px solid black;
                opacity: 0.7;
                background: #ccc;
            }
            #div1 {
                top: 0;
                left: 0;   
            }
            #div2 {
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            div1
        </div>
        <div id="div2">
           div2
        </div>
    </body>
</html>

具有固定位置的元素始終相對(duì)于瀏覽器的視口定位，而不是在文檔的結(jié)構(gòu)中。

具有固定位置的元素保持在原位，即使文檔被滾動(dòng)。

例2

<!DOCTYPE HTML>
<html>
    <head>
        <style>
div {
    position: fixed;
    background: gold;
    border: 1px solid black;
    width: 100px;
    height: 100px;
}
div#fixed-top {
    top: 5px;
    left: 5px;
}
div#fixed-bottom {
    bottom: 5px;
    left: 5px;
}
  
   </style>
   </head>
   <body>
        <div id="fixed-top">
        </div>
        <div id="fixed-bottom">
        </div>


   </body>
</html>

例3

從下面的代碼，我們可以看到，位置固定在正常流元素的頂部。

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css" rel="stylesheet">
        p {
          border-width: thin;
          border-style: solid; 
          height: 100px; 
          width: 100px;
          text-align: center
        }
        p.red {background-color: red; position: fixed; top: 0; left: 0}
        p.white {background-color: white; position: fixed; top: 0; left: 150px}
        p.blue {background-color: blue; position: fixed; top: 0; left: 300px}

    </style>
  </head>
  <body>
    <p class="red">
      Container 1
    </p>
    <p class="white">
      Container 2
    </p>
    <p class="blue">
      Container 3
    </p>
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. this is a test. 
  </body>
</html>

相對(duì)定位

相對(duì)定位元件相對(duì)于其正常位置定位。

相對(duì)值應(yīng)用頂部，底部，左側(cè)和右側(cè)屬性來定位元素相對(duì)于靜態(tài)值（默認(rèn)布局）下的位置。

以下代碼顯示相對(duì)定位的結(jié)果。樣式“l(fā)eft：-20px”從元素的原始左側(cè)位置減去20個(gè)像素。樣式“l(fā)eft：20px”為元素的原始左側(cè)位置添加了20個(gè)像素。

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}
</style>
</head>
<body>

<h2>Heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>

</body>
</html>

相對(duì)定位元素相對(duì)于其正常位置定位。

相對(duì)定位的元素通常用作絕對(duì)定位的元素的容器塊。

例4

<!DOCTYPE html>
<html>
<head>
<style>
.left{
    position:relative;
    left:-20px;
}

.right{
    position:relative;
    left:20px;
}
</style>
</head>

<body>
    <h1>with no position</h1>
    <h2 class="left">moved left</h2>
    <h2 class="right">moved right</h2>
</body>
</html>

絕對(duì)定位

絕對(duì)定位將元素相對(duì)于具有非靜態(tài)位置值的最近父親定位。如果沒有這樣的元件，則元件相對(duì)于主體元素定位。
以下代碼顯示如何使用絕對(duì)定位。通過絕對(duì)定位，元素可以放置在頁面的任何位置。以下標(biāo)題距離網(wǎng)頁左側(cè)100像素，距離網(wǎng)頁頂部150像素。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}
</style>
</head>
<body>

<h2>This heading has an absolute position</h2>

</body>
</html>

絕對(duì)定位的元素從正常流中移除。其他元素的行為就像沒有絕對(duì)定位元素。
絕對(duì)定位的元素可以與其他元素重疊。

例5

<!DOCTYPE html>
<html>
<head>
<style>
h2{
    position:absolute;
    left:100px;
    top:150px;
}
</style>
</head>
<body>
   <h2>This is a heading with an absolute position</h2>
</body>
</html>

重疊

z-index 在重疊期間控制圖層的順序。

<html>
<head>
<style type="text/css">
p {
  width: 200px;
  background-color: #ffffff;
  padding: 5px;
  margin: 10px;
  border-style: solid;
  border-color: #000000;
  border-width: 2px;
}

p.one {
  z-index: 3;
  position: absolute;
  left: 0px;
  top: 0px;
}

p.two {
  z-index: 1;
  position: absolute;
  left: 150px;
  top: 25px;
}

p.three {
  z-index: 2;
  position: absolute;
  left: 40px;
  top: 35px;
}
</style>

</head>


<body>
  <div class="page">
    <p class="one">
      Here is paragraph <b>one</b>. This will be at the top of the page.
    </p>
    <p class="two">
      Here is paragraph <b>two</b>. This will be underneath the other
      elements.
    </p>
    <p class="three">
      Here is paragraph <b>three</b>. This will be at the bottom of the
      page.
    </p>
  </div>

</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

← CSS display顯示

CSS Float浮動(dòng) →

寫筆記

我要補(bǔ)充

CSS Position定位

靜態(tài)定位

固定定位

例子

例2

例3

相對(duì)定位

例4

絕對(duì)定位

例5

重疊

推薦文章

推薦教程

推薦課程