1. 定位和 position 属性
CSS 中元素的定位类型由 position 属性来决定,
分为 3 种定位, 一共有 5 种属性值:
(1) absolute 绝对定位;
(2) relative 相对定位;
(3) fixed 固定定位;
(4) static 为默认值, 没有定位;
(5) inherit 为继承父元素的定位.
接下来将对上述 3 种定位进行介绍, 在开始前先设置 4 个 div 来作为原始模板,
将其中一个 div 作为父容器装另外 3 个 div, 背景颜色设置为黑色, 并设置相对定位
代码如下:
- 父容器设置宽为 300 像素, 子容器 id 分别为 div01-03
<div style="background-color: black; height: 300px; position: relative">
<div id="div01" class="div"></div>
<div id="div02" class="div"></div>
<div id="div03" class="div"></div>
</div>
- 子容器的 CSS 样式如下, 统一宽高 100 像素, 颜色分别从上到下是红绿蓝
.div{
width: 100px;
height: 100px;
}
#div01{
background-color: red;
}
#div02{
background-color: green;
}
#div03{
background-color: blue;
}
- 效果图示
2. 相对定位
-
作用:
保留原来的位置进行定位, 不会影响其他元素的定位 -
示例 1
将 div02 的 CSS 样式设置为相对定位, 并将其距离原位置左边的距离调整为 100 像素
css 样式代码如下
#div02{
position: relative;
left: 100px;
background-color: green;
}
如实际效果所展示:
div02 保留了原本的位置, 并向右移动了 100 像素的距离
div03 的排版并没有受到影响, 没有被顶上去
- 示例 2
将 div02 的 CSS 样式设置为相对定位, 并将其距离原位置左边和上边的距离分别调整为 50 像素
css 样式代码如下
#div02{
position: relative;
left: 50px;
top: 50px;
background-color: green;
}
如实际效果所展示:
div03 的位置并没有受到 div02 的移动所影响, 还是在原来的位置
div02 移动后, 是直接覆盖到 div03 之上, 不会将其顶下去
3. 绝对定位
-
作用:
脱离原来的位置进行定位, 如果有偏移量, 则会影响其他元素的定位 -
备注
(1) 绝对定位 absolute 是相对于最近的有定位的父级元素进行定位, 如果没有, 则相对文档定位
(2) 一般来说用相对定位 relative 作为定位对象即参照物 / 有定位的父元素,
绝对定位 absolute 则作为定位元素. -
示例 1
将 div02 的 CSS 样式设置为绝对定位, 并将其距离父容器左边的距离调整为 100 像素
css 样式代码如下
#div02{
position: absolute;
left: 100px;
background-color: green;
}
如实际效果所展示:
div03 的位置受到 div02 的移动所影响, 被顶上去 div02 所移动后留出的空位
div02 的移动显然脱离了原来的位置, 并没有保留原位置就偏移走了
- 示例 2
将 div02 的 CSS 样式设置为绝对定位, 并将其距离父容器左边和上边的距离分别调整为 50 像素
css 样式代码如下
#div02{
position: absolute;
left: 50px;
top: 50px;
background-color: green;
}
如实际效果所展示:
div03 的位置受到 div02 的移动所影响, 依旧被顶上去 div02 所移动后留出的空位
div02 从原本距离父容器顶部 100 像素 变成了距离父容器顶部 50 像素, 即向上移动了 50 像素的距离
4. 固定定位
- 作用:
保持在所见窗口中的位置不变, 相对浏览器窗口定位
所见窗口就是当前浏览器所展现的窗口
即页面在现在的滚动条位置下所展示的部分, 并非整个完整的页面
- 示例一个永远固定在窗口中央的红块的样例
css 样式如下所示
<div id="div001" style="background-color: #ff0000; width: 100px; height: 100px; position: fixed; left: 50%; right: 50%;"></div>
当垂直滚动条在最上方时
当垂直滚动条在挪动了位置时
如实际效果所示, 红块一直保持在窗口的同一位置, 不会随着页面的移动所改变位置