CSS Position定位

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

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

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

它們也根據不同的位置值工作。

允許的值為：

static - 布局正常。這是默認值。
relative - 相對于其正常位置定位。
absolute -相對于其具有非靜態位置值的其第一祖先定位。
fixed -相對于瀏覽器窗口定位。

您可以使用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.www.w3cschool.cn/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>

上面的代碼呈現如下：

靜態定位

默認情況下，HTML元素位于靜態。

靜態定位元素根據頁面的正常流動定位。

靜態定位元素不受頂部，底部，左側和右側屬性的影響。

靜態定位元素根據頁面的正常流動定位。

在下面的HTML代碼中，第1個是固定定位的，其余??的三個div元素是靜態定位的。靜態位置處于正常流動中，固定不在正常流動中。

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

上面的代碼呈現如下：

固定定位

當您使用固定值時，元素將相對于瀏覽器窗口放置。元素占據相同的位置，即使內容的其余部分向上或向下滾動。

注意：僅當指定了！DOCTYPE時，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的高度設置為2000px，這使得滾動條可見。我們可以滾動滾動條來查看固定位置的div元素是否移動。

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

具有固定位置的元素始終相對于瀏覽器的視口定位，而不是在文檔的結構中。

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

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

相對定位

相對定位元件相對于其正常位置定位。

相對值應用頂部，底部，左側和右側屬性來定位元素相對于靜態值（默認布局）下的位置。

以下代碼顯示相對定位的結果。樣式“left：-20px”從元素的原始左側位置減去20個像素。樣式“left：20px”為元素的原始左側位置添加了20個像素。

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

相對定位元素相對于其正常位置定位。

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

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

絕對定位

絕對定位將元素相對于具有非靜態位置值的最近父親定位。如果沒有這樣的元件，則元件相對于主體元素定位。
以下代碼顯示如何使用絕對定位。通過絕對定位，元素可以放置在頁面的任何位置。以下標題距離網頁左側100像素，距離網頁頂部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>

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

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

? Previous Next ?

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS教程

CSS Position定位

靜態定位

固定定位

例子

例2

例3

相對定位

例4

絕對定位

例5

重疊