阅读(2715)

CSS Position定位

最后一次修改 2017年08月04日


我们可以使用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>


我们可以使用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>