CSS 教程
CSS 教程
阅读(15.4k) 书签 赞(8) 我要纠错

CSS Position定位

2018-10-27 17:33 更新

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



以上内容是否对您有帮助：
← CSS display显示
CSS Float浮动 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号