1：position的四种取值
static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定
relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。
absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。
fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。可惜的是ie还不支持
相对定位的元素不会脱离文档流，占用文档流的空间，也就是说他正常位置还是占用，同时显示在（Left; Right等）属性定义的位置，Left; Right; Top和Bottom属性 的改变不会改变相对于正常位置的其他块的位置。但是使用margin属性会改变相对于正常位置的其他位置。
绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，也就是说他的正常位置是没有东西了，Left; Right; Top和Bottom属性与margin属性使用不会改变相对于正常位置的其他块的位置，
绝对定位的元素以最近的定位祖先元素为参照物。
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
border: 1px solid,red;
}
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
border: 1px solid,red;
}
#box {
width: 800px;
height: 600px;
background: #ffd800;
}
width: 800px;
height: 600px;
background: #ffd800;
}
#box1 {
width: 300px;
height: 200px;
background: #fff800;
}
width: 300px;
height: 200px;
background: #fff800;
}
#box2 {
width: 200px;
height: 300px;
background: #ffa800;
position:absolute ;
left:10px;
margin-top:300px;
margin-left:20px;
}
width: 200px;
height: 300px;
background: #ffa800;
position:absolute ;
left:10px;
margin-top:300px;
margin-left:20px;
}
#box3 {
width: 100px;
height: 100px;
background: #afd800;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
width: 100px;
height: 100px;
background: #afd800;
}
</style>
</head>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</body>
</html>
2855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
