DIV定位，position属性
absolute ：绝对定位
位置相对离元素最近父级文档流的左上角，会脱离文档流，飘起来。
配合top、right、bottom、left使用。
有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body（文档流）或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
div{
width:300px;
height:300px;
}
.div1{
background:#ccc;
position:absolute;
left:30px;
top:50px;
/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
}
.div2{
background:red;
}
</style>
</head>
<body>
<div class="div1">这是div1,当设置position为absolute时，div1会飘起来。相对于最近父级文档流。</div>
<div class="div2">这是div2，当div1飘起来时，div2会移动到div1的位置。</div>
</body>
</html>relative ：相对定位
位置相对于自己的当前位置，不会脱离文档流，
不会飘起来。
配合top、right、bottom、left使用。
如：设置top为10px，div会移动到距离自己当前top位置10px的位置。
relative 就是相对元素static（正常默认）定位时的位置进行偏移，如果指定static时top是50象素，
那么指定relative并指定top是10象素时，元素实际top就是60象素了。
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
div{
width:300px;
height:300px;
}
.div1{
background:#ccc;
position:relative;
left:30px;
top:50px;
/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
}
.div2{
background:red;
}
</style>
</head>
<body>
<div class="div1">这是div1,当设置position为relative时，div1会相对于自己默认的位置进行移动。</div>
<div class="div2">这是div2，当div1移动时，div2不会移动到div1的位置。</div>
</body>
</html>
fixed ：固定定位，fixed才是真正的绝对定位。
位置相对于浏览器。
配合top、right、bottom、left使用。
其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，
也就是说永远可以看到，这个做一些彩单的时候可以用。
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>DIV+CSS</title>
<style type="text/css">
.div1{
background:#ccc;
position:fixed;
bottom:10px;
right:100px;
/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
}
</style>
</head>
<body>
<div class="div1"><a href="#">回到顶部></a></div>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
<p>测试position属性fixed。</p>
</body>
</html>static：静态定位
就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定。
relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性，
那么它的position实际上依然是static。
使用了relative,absolute,fixed就必须指定具体的位置。
部分内容摘自：http://javapub.iteye.com/blog/733471
今天的文章DIV position属性分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29000.html
