1. static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????* { ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????.static { ???????????????position: static; ???????????????top: 10px; ???????????????left: 10px; ???????????????width: 100px; ???????????????height: 200px; ???????????????background: yellow; ???????????} ???????</style> ???</head> ???<body> ???????<div class="static"> ???????</div> ???</body></html>金黄色方块会在左上角显示，没有偏移。
2. fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
这个比较好理解，只和窗口有关，与父元素，文档流都无关。
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????* { ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????.fixed-outer { ???????????????position: fixed; ???????????????top: 20px; ???????????????left: 20px; ???????????????width: 20px; ???????????????height: 20px; ???????????????background: yellow; ???????????} ???????????.fixed-inner { ???????????????position: fixed; ???????????????top: 40px; ???????????????left: 40px; ???????????????width: 20px; ???????????????height: 20px; ???????????????background: red; ???????????} ???????</style> ???</head> ???<body bgcolor="#999"> ???????<div class="fixed-outer"> ???????????<div class="fixed-inner"> ???????????</div> ???????</div> ???</body></html>left就是左边界距离视窗左边距的位置，right就是右边界距离视窗右边距的位置，top，bottom同理。top和bottom或者left和right同时存在，只有top或者left生效。
小广告效果：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????* { ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????.fixed { ???????????????position: fixed; ???????????????right: 0px; ???????????????bottom: 50px; ???????????????width: 200px; ???????????????height: 100px; ???????????????background: yellow; ???????????} ???????</style> ???</head> ???<body> ???????<div class="fixed"> ???????</div> ???????<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> ???????<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> ???????<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> ???????<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> ???????<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> ???</body></html>3. relative
生成相对定位的元素，相对于其正常位置进行定位。
相对元素正常应该在的位置移动，元素所占的空间位置不变，但是显示的位置发生偏移。
left是向右偏移，right是向左偏移（这么说好奇怪，但是…应该没错吧……），top向下偏移，bottom向上偏移。
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????* { ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????.div { ???????????????width: 100px; ???????????????height: 100px; ???????????????border: 1px solid; ???????????????float: left; ???????????} ???????????.relative1 { ???????????????position: relative; ???????????????left: 10px; ???????????????top: 10px; ???????????????border-color: red; ???????????} ???????????.relative2 { ???????????????position: relative; ???????????????right: 10px; ???????????????bottom: 10px; ???????????????border-color: green; ???????????} ???????</style> ???</head> ???<body> ???????<div class="div"></div> ???????<div class="div relative1"></div> ???????<div class="div"></div> ???????<div class="div relative2"></div> ???</body></html>4. absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(如果没有这样的父元素呢？emmm……应该是整个文档最外层的框……吧……
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute元素会附带 display:block 效果，同时，设置absolute后，元素会脱离文档流。
1. 如果不设置"left", "top", "right" 以及 "bottom"，会显示在正常应该显示的位置。
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????.relative { ???????????????width: 300px; ???????????????height: 300px; ???????????????border: 1px solid; ???????????????position: relative; ???????????????left: 100px; ???????????????top: 100px; ???????????} ???????????.absolute { ???????????????position: absolute; ???????????????width: 100px; ???????????????height: 100px; ???????????????border: 1px solid red; ???????????} ???????</style> ???</head> ???<body> ???????<div class="relative"> ???????????outer ???????????<div class="absolute"></div> ???????</div> ???</body></html>2. 设置了偏移……（一下父元素全部指 static 定位以外的第一个父元素
设置了left 将以父元素的左边界为基准 向右偏移 垂直方向和之前相同。
设置了right 将以父元素的右边界为基准 向左偏移 垂直方向和之前相同。
设置了top 将以父元素的上边界为基准 向下偏移 水平方向和之前相同。
设置了bottom 将以父元素的下边界为基准 向上偏移 水平方向和之前相同。
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????.relative { ???????????????width: 300px; ???????????????height: 300px; ???????????????border: 1px solid; ???????????????position: relative; ???????????????left: 100px; ???????????????top: 100px; ???????????} ???????????.absolute1, .absolute2, .absolute3, .absolute4, .absolute5 { ???????????????position: absolute; ???????????????width: 100px; ???????????????height: 100px; ???????????????border: 2px solid red; ???????????} ???????????.absolute2 { ???????????????left: 60px; ???????????????border-color: green; ???????????} ???????????.absolute3 { ???????????????right: 10px; ???????????????border-color: yellow; ???????????} ???????????.absolute4 { ???????????????top: 0; ???????????????border-color: pink; ???????????} ???????????.absolute5 { ???????????????bottom: 10px; ???????????????border-color: blue; ???????????} ???????</style> ???</head> ???<body> ???????<div class="relative"> ???????????outer ???????????<div class="absolute1"></div> ???????????<div class="absolute2"></div> ???????????<div class="absolute3"></div> ???????????<div class="absolute4"></div> ???????????<div class="absolute5"></div> ???????</div> ???</body></html>5. others
inherit：继承父元素的值。
initial： 初始值，即默认值，static。
unset： 非继承属性，相当于initial，static。
6. navigation bar
效果见右下角 >_<
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>position</title> ???????<style> ???????????.right-nav * { ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????.right-nav { ???????????????position: fixed; ???????????????right: 10px; ???????????????bottom: 150px; ???????????} ???????????.right-nav li { ???????????????list-style-type: none !important; ???????????????position: relative; ???????????} ???????????.right-nav li a { ???????????????text-decoration: none; ???????????????display: block; ???????????????width: 150px; ???????????????line-height: 30px; ???????????????text-align: center; ???????????????background: #666; ???????????????border-bottom: 1px solid; ???????????????color: #fff; ???????????} ???????????.right-nav li a:hover, .right-nav li a:active ?{ ???????????????background: #ccc; ???????????} ???????????.right-nav .summary { ???????????????position: absolute; ???????????????right: 150px; ???????????????top: 0px; ???????????????line-height: 30px; ???????????????height: 30px; ???????????????width: 400px; ???????????????background: #ccc; ???????????????color: #fff; ???????????????text-align: center; ???????????????display: none; ???????????} ???????????.right-nav li:hover .summary { ???????????????display: block; ???????????????font-size: 12px; ???????????????border-right: 1px solid #fff; ???????????} ???????</style> ???</head> ???<body> ???????<div class="right-nav"> ???????????<ul> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#static">1. static</a> ???????????????????<div class="summary">默认值。没有定位，元素出现在正常的流中。</div> ???????????????</li> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#fixed">2. fixed</a> ???????????????????<div class="summary">生成绝对定位的元素，相对于浏览器窗口进行定位。</div> ???????????????</li> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#relative">3. relative</a> ???????????????????<div class="summary">生成相对定位的元素，相对于其正常位置进行定位。</div> ???????????????</li> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#absolute">4. absolute</a> ???????????????????<div class="summary">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</div> ???????????????</li> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#others">5. others</a> ???????????????????<div class="summary">inherit & initial & unset</div> ???????????????</li> ???????????????<li><a href="http://www.cnblogs.com/wenruo/p/8488254.html#navigation-bar">6. navigation bar</a> ???????????????????<div class="summary">根据定位写一个导航栏。</div> ???????????????</li> ???????????</ul> ???????</div> ???</body></html>。
- 1. static默认值。没有定位，元素出现在正常的流中。
- 2. fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
- 3. relative生成相对定位的元素，相对于其正常位置进行定位。
- 4. absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- 5. othersinherit & initial & unset
- 6. navigation bar根据定位写一个导航栏。
CSS position 属性
原文地址：https://www.cnblogs.com/wenruo/p/8488254.html