我们可以使用position属性设置元素的位置。
元素的位置也由顶部，底部，左侧和右侧属性控制。
但是，除非先设置position属性，否则这些属性将不起作用。
它们也根据不同的位置值工作。
允许的值为：
您可以使用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..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>具有固定位置的元素始终相对于浏览器的视口定位，而不是在文档的结构中。
具有固定位置的元素保持在原位，即使文档被滚动。
<!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>从下面的代码，我们可以看到，位置固定在正常流元素的顶部。
<!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>相对定位元素相对于其正常位置定位。
相对定位的元素通常用作绝对定位的元素的容器块。
<!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><!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><!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>
都说用 DIV+CSS 布局来设计网站便于优化，容易被收录，那么你对 DIV+CSS 布局的用法是否了解？CSS 布局是网页html通过 DIV 标签 ...
CSS 背景CSS 背景属性用于定义 HTML 元素的背景。CSS 属性定义背景效果：background-colorbackground-imagebackground-repeatbac...
CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。 更多实例设置元素的...
HTML 教程导读- （HTML5标准）HTML（英语：Hyper Text Markup Language，简称：HTML ）也叫作超文本标记语言，是一种使用结构化 ...
为了让用户拥有更好的阅读体验，将文章中数据以更直观的方式展示是非常必要的，因此，拥有良好的表格设计就显得非常重要了。下面...
