position属性
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky |
粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值，详情查看 CSS initial 关键字。 |
以下文字转自(https://www.cnblogs.com/guolao/p/9048308.html)
关于CSS position，来自MDN的描述：
CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
然后来看看什么是文档流(normal flow)，下面是 www.w3.org 的描述：
Normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
- normal flow直译为常规流、正常流，国内不知何原因大多译为文档流；
- 窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；
- 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；
- 内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；
- 有三种情况将使得元素脱离normal flow而存在，分别是 float，absolute ，fixed，但是在IE6中浮动元素也存在于normal flow中。
1.position:static(static是position的默认定位方式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position定位详解</title> <style> #container{ width: 600px; height: 500px; background-color: rgb(226, 226, 226); margin:0 auto; } .box1{ width: 180px; height: 140px; background-color: aqua; } </style> </head> <body> <div id="container"> <div class="box1"></div> </div> </body> </html>
效果图:
position:static 是所有html元素默认参数.
2.position:relative(相对于元素原来的位置进行定位)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position定位详解</title> <style> #container{ width: 600px; height: 500px; background-color: rgb(226, 226, 226); margin:0 auto; } .box1{ width: 180px; height: 140px; background-color: aqua; } .box2{ width: 210px; height: 120px; background-color: rgb(81, 255, 0); } </style> </head> <body> <div id="container"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
效果图:
给box2块级元素添加relative定位,并设置上和左边距.
.box2{
210px;
height: 120px;
background-color: rgb(81, 255, 0);
position: relative;
top:30px;
left: 50px;
}
效果图:
3.position:absolute(相对于 static 定位以外的第一个父元素进行定位,会脱离文档流)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position定位详解</title> <style> #container{ width: 600px; height: 500px; background-color: rgb(226, 226, 226); margin:0 auto; } .box1{ width: 180px; height: 140px; background-color: aqua; } .box2{ width: 210px; height: 120px; background-color: rgb(81, 255, 0); position: absolute; top:50px; left: 100px; } </style> </head> <body> <div id="container"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
主要设置box2为绝对定位
.box2{
210px;
height: 120px;
background-color: rgb(81, 255, 0);
position: absolute;
top:50px;
left: 100px;
}
效果图:
4.position:fixed(相对浏览器定位)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position定位详解</title> <style> #container{ width: 600px; height: 500px; background-color: rgb(226, 226, 226); margin:0 auto; } .box1{ width: 180px; height: 140px; background-color: aqua; } .box2{ width: 210px; height: 120px; background-color: rgb(81, 255, 0); position: fixed; right:50px; top: 70px; } </style> </head> <body> <div id="container"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
效果图:
5.position:inherit(继承父元素定位)
6.position: sticky
7.父元素是相对定位,子元素是绝对定位(子绝父相)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>position定位详解</title> <style> #container{ width: 600px; height: 500px; background-color: rgb(226, 226, 226); margin:0 auto; position: relative; top: 40px; left: 100px; } .box1{ width: 180px; height: 140px; background-color: aqua; position: absolute; left: 80px; top:100px; } </style> </head> <body> <div id="container"> <div class="box1"></div> </div> </body> </html>
效果图:
8.父元素是position:absolute定位,子元素也是position:absolute定位(子绝父绝)
总结(转自:https://blog.csdn.net/fungleo/article/details/50056111)
(1)position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流.
(2)position: relative; 相对于自己在文档流中的初始位置偏移定位。
(3)position: fixed; 相对于浏览器窗口定位。
(4)position: absolute; 是相对于父级非position:static 浏览器定位。
如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。
有关定位的讲解,这篇文章讲得比较好(https://blog.csdn.net/jianghao233/article/details/80534835),下图转自这篇文章.
参考文章：
https://www.cnblogs.com/guolao/p/9048308.html
https://baijiahao.baidu.com/s?id=1631432397252663686&wfr=spider&for=pc
https://blog.csdn.net/fungleo/article/details/50056111