定位
今天来写一个定位吧。定位说简单吧也不简单，但是要学好了也不难，合理运用定位，可以给我们减少很多的麻烦。
position 元素定位的类型
1、 偏移属性：
a、left-------表示向右边偏移
b、right-------在右边时，则向左边偏移
c、top-------表示向元素的上方插入多少像素，使元素向下移动多少像素
d、buttom----------表示向元素的下方插入多少像素，使元素向上移动多少像素
2、取值
a、static 默认值（都说是默认值咯，就没有什么好说的了^_^）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid gainsboro;
}
.top{
background-color: gold;
}
.main{
background-color: forestgreen;
position: static;
}
.buttom{
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="buttom"></div>
</body>
</html>
结果如图：
b、relative 相对定位： 相对于自身源文档 的位置为目标进行定位，占用源文档位置
.main{
background-color: forestgreen;
position: relative;
left: 20px;
top: 50px;
}
结果为：
c、 absolute 绝对定位 ：是以最近的元素为目标，进行定位，若没有父元素，则以浏览器为目标来定位，并且完全不暂用位置，脱离了文档流
.main{
background-color: forestgreen;
position: absolute;
left: 20px;
top: 50px;
}
结果如图：
d、fixed 固定定位：fixed相对于window固定，滚动、缩小都浏览器窗口并不会使其移动，会脱离文档流。
结果：
这个结果需要整个windom窗口进行放大缩小才能展示出结果，这里就不展示l
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
