CSS笔记 ( 七 ) 相对定位 绝对定位 固定定位

 
 
 

---

博主的 Github 地址

---

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>

当垂直滚动条在最上方时

当垂直滚动条在挪动了位置时

如实际效果所示, 红块一直保持在窗口的同一位置, 不会随着页面的移动所改变位置