1. Containing Block
To talk about position, we first involve a concept: containing block.
A containment block is simply understood as a positioning reference block, which is the big box within the small box within the big box. If an element has a positon attribute, it must involve a containing block. Let’s briefly summarize it first.
1. Initial containing block (Initial containing block), which is the containing box of the root element. In the browser, it is a rectangle whose origin coincides with the origin of the canvas and whose size is the same as the viewport.
2. The position: static|relative element contains the content box of the nearest block-level [block|list-item|table] parent element
3. Position: first find the absolute nearest Position the ancestor element [If not, the containing block is the initial containing block]
4. The containing block of the positon:fixed element is determined by the viewport and has nothing to do with the root element.
Example: Postion is not set, so the label position is static by default.
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>包含块 by starof</title></head><body> <div id="div1"> <p id="p1">第一段内容</p> <p id="p2"> 这些文字是 <em id="em1">第 <strong id="strong1">二</strong>段</em> 内容 </p> </div></body></html>
The element that generates the box??》Containing block
body??》initial C.B.(UA-dependent)
div1?? 》body
p1??》div1
p2??》div1
em1??》p2
strong1??》p2
Example: direction:ltr, the top of the protection block, the left is the padding box of the first box generated by the ancestor element, and the same is true for the lower right.
<p style="border:1px solid red; width:200px; padding:20px;"> TTT <span style="background-color:#C0C0C0; position:relative;padding:10px;"> 这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span></p>
The width of the containing block can be negative, the start position of the first box of an inline element is to the right of the end position of the last box, At this time, the containing block has a negative value.
Example: direction:rtl, the top of the protection block, the right is the top of the first box of the ancestor element, the right padding box, the same goes for the bottom left.
<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;"> T <span style="background-color:#C0C0C0; position:relative;padding:10px;"> 这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span></p>
Other situations are relatively simple and will not be introduced. Next are the details of each value of position.
2. position:staticstatic is the default value, which means that the element is not "positioned". Other values of position mean that the element is "positioned". So "positioned element" means an element whose position attribute is set to a value other than static. The layout of position:static elements is laid out in the normal flow according to the box model.
Usage:
Generally, there is no need to display the specification unless you want to override the previously set positioning and return the element to the normal flow.
3. position:relativerelative behaves the same as static, unless the top|right|bottom|left attribute is added. //lxy can be understood as relative, which is a transition attribute state from static to absolute. It's like there is an inline-block between inline and block.
After the relative positioning element attribute setting top|right|bottom|left deviates from the normal position, other elements will not adjust their positions to make up for the remaining space after the deviation. It can also be understood that it still occupies the original space, so it does not affect the layout of other elements and may cover other elements.
Summary: relative elements are still in normal flow and do not change the display attribute, which may cover other elements on the page.
Example:
<style>div{ display: inline-block;}.red{ width: 100px; height: 100px; border:1px solid red; position: relative; background-color: yellow;}.green{ width: 100px; height: 100px; border:1px solid green;}/*.left{ left: -50px;}*/</style><body> <div class="red left">第一个元素</div> <div class="green">第二个元素</div> <div class="red left">第三个元素</div></body>Uncomment to see the contrast effect after setting the offset:
4. position:absoluteposition:absolute Position relative to the nearest "positioned" ancestor element. If there is no "positioned" ancestor element, then it is relative to the document's body element, and it moves as the page scrolls.
Solution when the positioning values of absolutely positioned elements conflict:
To summarize a few points:
position: absolute and margin and padding do not conflict and can take effect at the same time.
position:absolute will change the display value, so it will produce wrapping.
The elements with position:absolute are out of the normal flow. So it will be destructive.
When position:absolute exists [without top, right, bottom, left], float has no effect, so it can be used to float.
Elements with position:absolute set will shrink in size to accommodate the content.
Because position:absolute will change the display attribute of the element [similar to floating], inline becomes block, such as the following example.
<style>.container{ border: 1px solid green; padding: 30px; background-color: green; background-clip: content-box;/*将背景裁剪到内容框，方便看绝对定位元素效果*/ position: absolute;}</style><div class="container">内容</div>块状元素设置position:absolute后，chrome下top,right,bottom,left变为auto，而ff下直接是计算出的宽度。
举例：子元素absolute，父元素高度塌陷。
<style>.father{border:1px solid red;}.son{background-color: green;position: absolute;/*float: left;*/}</style></head><body> <div class="father"> <div class="son" >元素内容</div> </div></body>原理：和float一样，position:absolute让元素脱离正常流，而父元素还在正常流中，它们已经是两个世界的东东了，自然撑不起父元素高度。
Note:设置position:absolute后再设置float:left不生效，且最终计算的float值还是none而不是设置的值。
不使用top，right,bottom,left中任何一个属性或者使用auto作为值。
一般都是用absolute加margin调整位置。
举例：hot图片始终在求课文字右上角。
<style type="text/css">.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background-color: red; background: url(img/new.jpg);}</style><body> <h3> <a href="#"> 新项目 <i class="icon-hot"></i> </a> </h3> <a href="#">新项目</a><img src="img/new.jpg" style="margin-bottom:15px;"></body>分析：因为position:absolute让标签的display值从inline变成block，所以可以设置宽高。通过margin调整位置。
类似例子：
<!doctype html><html><head><meta charset="utf-8"><title>图标定位二三事</title><style>body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }body, h3, h5 { margin: 0; }img { border: 0 none; vertical-align: bottom; }.l { float: left; }.r { float: right; }.constr { width: 1200px; margin-left: auto; margin-right: auto; }.course { padding-top: 10px; }.course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }.course-list-img { background-color: #6396F1; }.course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }.course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }</style></head><body><div class="main"> <div class="constr"> <div class="course"> <a href="http://www.imooc.com/view/121" class="course-list"> <div class="course-list-img"> <span class="icon-recom">推荐</span> <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!-- --><i class="icon-vip">vip</i> </div> <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5> <div class="course-list-tips"> <span class="l">已完结</span> <span class="r">3514人学习</span> </div> </a> </div> </div></div></body></html>举例：实现遮罩效果
<style>body { background-color: #ddd;}img { vertical-align: bottom;}.container { display: inline-block; position: relative;}.cover { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: blue; opacity: .5; filter: alpha(opacity=50);}</style><body><span class="container"> <i class="cover"></i> <img src="img/wb.jpg"></span></body>同样的原理实现：全屏自适应遮罩层效果，切加上margin:auto可实现水平且直居中。
<!doctype html><html><head> <meta charset="utf-8"> <title>没有宽度和高度声明实现的全屏自适应效果by starof</title><style>html, body { height: 100%;}.overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);}.content { position: absolute; width: 300px; height: 200px; margin: auto; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff;}</style></head><body> <div class="overlay" id="overlay"> <div class="content"> 弹出层内容 <a href="javascript:void(0);" id="close">关闭</a> </div> </div> <a href="javascript:void(0);" id="open">打开</a><script>var openA=document.getElementById("open");var overlay=document.getElementById("overlay");var closeA=document.getElementById("close");openA.onclick=function(){overlay.style.display="block";}closeA.onclick=function(){overlay.style.display="none";}</script></body></html>fixed是absolute的特例，相对于视窗来定位，所以页面滚动它还是停靠在相对位置。
所以fixed也会改变元素的display属性，会让元素脱离正常流。
六、position和float的关系1、position:static;position:relative和float属性可共存。
3、同时设置position:absolute和float，float无效。
4、设置position:absolute的元素可能会覆盖float元素。
举例：
<style>.float{ width: 300px; height: 150px; background: green;}.abs{ width: 150px; background-color: red; position: absolute; top:50px;}</style></head><body> <div class="float">我是float：left的DIV</div> <div class="abs">我是一个应用了position：absolute的DIV。</div></body>为什么绝对定位元素可能会覆盖浮动元素，因为浏览器渲染的时候相同堆叠上下文中，先渲染非定位元素，再渲染浮动元素，最后渲染已定位元素。
关键问题是，此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经定位的元素（即position:relative/absolute/fixed），对浮动元素不起作用的。
可将float元素的position属性值设置为relative，然后设置z-index。因为已定位元素并且z-index不是默认的auto的话会生成一个新的堆叠上下文。
如果上面说的还不是很懂，或者想更深入了解z-index原理，可参考：z-index堆叠规则
七、资源链接8 Box model
9 Visual formatting model
中文版CSS2/visuren
中文版CSS2/visudet/zh-hans
KB012: 绝对定位( Absolute positioning )
http://w3help.org/zh-cn/causes/RM1020
http://w3help.org/zh-cn/kb/008/
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
