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>