共计 946 个字符，预计需要花费 3 分钟才能阅读完成。
一. 定位方式
1.position:static; 默认定位方式 2.position:relateve; 相对定位, 相对于该元素静态定位的位置(即元素所在正常文档流的位置)eg:
<!DOCTYPE html>
<html>
<head>
<title>position 相对定位 </title>
</head>
<style>
.container {
width: 100%;
height: 200px;
background: silver;
}
div[class^=”div”] {
width: 40px;
height: 40px;
background: pink;
border: 1px solid yellow;
}
.div2 {
position: relative;
top: 40px;
left: 40px;
}
</style>
<body>
<div class=”container”>
<div class=”div1″>1</div>
<div class=”div2″>2</div>
<div class=”div3″>3</div>
</div>
</body>
</html>
结果: 相对定位并没有脱离文档流, 相对于该元素以前所在的位置进行偏移
3.position:absolute(绝对定位), 相对于除了 static 定位以外的父元素进行定位, 如果父元素没有定位, 就根据 body(即浏览器窗口)进行定位, 绝对定位的子元素是脱离文档流的, 在原文档中不占有空间 eg: 把上述例子第二个子 div 定位方式修改下, 它的父级元素 (class=”container”) 没有定位, 所以相对于 body 进行定位
.div2 {
position: absolute;
top: 40px;
left: 40px;
}
结果:
4.position:fixed(固定定位), 相对于浏览器窗口进行定位, 即 body5.position:inherit; 继承父元素的定位方式
二. 文档流
1. 定义: 文档流是在 HTML 中的位置顺序决定排布的过程 2. 脱离文档流的三种方式:
positon:relative;
positon:fixed;
float 浮动
3. 以上脱离文档流会使当前元素形成一个 BFC(块级格式化上下文), 对于 BFC 的理解, 请看我之前的总结 https://segmentfault.com/a/11…
