1.静态定位(static)
静态定位是元素的默认定位方式.也就是说网页中所有元素默认都是静态定位的 —— 按照标准流特性摆放位置
注意：在静态模式下，无法通过边偏移属性（top、bottom、left 或 right）来改变元素的位置
提示：因为是默认值.所以静态定位在布局时不使用.但是要知道
position:static
2.相对定位（relative）
相对定位是元素相对于它 在标准流中的位置 + 边偏移属性 来设置元素的位置
相对定位不脱标，并且占据原来的位置，相对定位的元素位置偏移基于自身
举个例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
position: relative;
left: 300px;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
运行结果如下：
3.绝对定位（absolute）
绝对定位有两个重要的概念:
(1)完全脱标 —— 完全不占位置
(2)父元素要有定位 —— 父元素在标准流中的位置 + 边偏移属性 来设置元素的位置
- 如果当前父元素没有定位（相对、绝对或固定），则寻找上一级有定位的父元素；
- 如果所有父元素都没有定位，则以浏览器为准定位（Document 文档）
- 如果父亲有定位，则以父亲为准
定位口诀 —— 子绝父相(子级是绝对定位，父级要用相对定位)
4.固定定位（fixed）
固定定位是绝对定位的一种特殊形式
完全脱标 —— 完全不占位置
只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置
跟父元素没有任何关系
不随滚动条滚动
z-index
在使用定位布局时，可能会出现盒子重叠的情况 ,应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
z-index 的特性如下：
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
.son{
position:absolute;
z-index:1;
}
注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
定位总结：
8605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
