为方便，top、right、left、bottom属性简写为TRLB
举个栗子:
将div标签的position设置为absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>absolute</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid red; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <p>你好</p> <div class="absolute"></div> </body> </html>
浏览器显示:
通过页面显示我们发现,设置为absolute的绝对定位元素div,不顾处于标准流中的p标签的存在,仍然显示在了top:0px; left:0px;位置,
从中我们也可以看出绝对定位元素脱离了正常的标准流
举个栗子:
将div标签的position设置为relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>relative</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .relative{ width: 100px; height: 100px; border: 1px solid red; position: relative; top: 0px; left: 0px; } </style> </head> <body> <p>你好</p> <div class="relative"></div> </body> </html>
浏览器显示:
我们发现,设置为relative的相对定位元素div,受标准流中的p标签的约束,显示在了p标签的下方,因为它是相对于在标准流中原来的位置进行定位的.
因此可以认为相对定位元素仍处于正常的标准流当中,不能破坏标准流布局的规则
举个栗子:
给position设置为relative的div标签,加一个position设置为relative的父标签,观察fixed是否受具有position的父标签影响,作为对比我们再加上一个属性值为absolute的div标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fixed</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .fixed{ width: 100px; height: 100px; border: 1px solid red; position: fixed; top: 0px; left: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid blue; position: absolute; top: 0px; left: 0px; } .pre{ width: 200px; height: 200px; border: 1px solid black; position: relative; top: 100px; left: 100px; } </style> </head> <body> <div class="pre"> <div class="fixed"></div> <div class="absolute"></div> </div> </body> </html>
网页显示:
我们发现,属性值为fixed的子标签并不受具有position属性的父标签影响,脱离了来父标签的约束,仍然显示在top:0px; left:0px;位置.
而属性值为absolute的子标签却受着具有position属性的父标签约束,显示在父标签的区域内,这也是fixed与absolute的一个重要区别
但我们还是可以认为,属性值为absolute的子标签也显示在了top:0px; left:0px;位置.只不过它是相对于父标签进行定位的
举个栗子:
对于父div标签我们设置position:fixed,对于子div标签我们设置position:inherit,观察子标签是否会继承父标签的position属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inherit</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .pre{ width: 200px; height: 200px; border: 1px solid black; position: fixed; top: 100px; left: 100px; } .inherit{ width: 100px; height: 100px; border: 1px solid red; position: inherit; top: 0px; left: 0px; } </style> </head> <body> <div class="pre"> <div class="inherit"></div> </div> </body> </html>
浏览器显示:
我们发现,子标签具有和父标签同样的position属性值---fixed,子标签的fixed使它显示在了相对于浏览器窗口进行定位的top:0px; left:0px;位置
举个栗子
给body标签设置内边距和外边距,观察相对定位元素和绝对定位元素的显示情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>inherit</title> <style type="text/css"> body{ margin: 10px; padding: 10px; } .relative{ width: 100px; height: 100px; border: 1px solid red; position: relative; top: 0px; left: 0px; } .absolute{ width: 100px; height: 100px; border: 1px solid black; position: absolute; top: 0px; left: 0px; } </style> </head> <body> <div class="relative"></div> <div class="absolute"></div> </body> </html>
网页显示:
我们发现元素:<div class="relative"></div>受body标签内外边距的影响,显示在了元素:<div class="absolute"></div>的右下方
因为先写的定位元素会被后写的定位元素覆盖,因此我们需要设置定位元素的堆叠顺序,是其按照我们想要的覆盖方式进行显示
举个大栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .red{ width: 100px; height: 100px; background-color: red; position: absolute; top: 0px; left: 0px; z-index: 5; } .black{ width: 100px; height: 100px; background-color: black; position: absolute; top: 0px; left: 0px; z-index: 3; } .blue{ width: 100px; height: 100px; background-color: blue; position: absolute; top: 0px; right: 0px; z-index: -1; } .no-position-yellow{ width: 1500px; height: 1000px; background-color: yellow; } </style> </head> <body> <div class="no-position-yellow"></div> <div class="red"></div> <div class="black"></div> <div class="blue"></div> </body> </html>
网页显示:
我们可以看到只有背景为红色和黄色的元素显示了,并且红色元素堆叠在黄色元素上方,因为黑色元素的z-index小于红色元素的z-index,而它们位置相同,因此红色元素将黑色元素完全覆盖了.
对于蓝色元素,因为他的z-index为负数,所以它直接被标准流中的黄色元素覆盖.
原文：https://www.cnblogs.com/huwt/p/10436468.html