文章目录

• 前言
• 一、了解定位
• 二、偏移量
• • 1.了解偏移量
  • 2.定位的使用
  • • 2.1 相对定位以及绝对定位
    • 2.2固定定位
• 总结

---

前言

定位在前端css中是一大重点，定位的出现是我们的前端布局变得非常方便快捷，它的作用就是控制元素在包含块中的精准位置，非常的简单粗暴。

一、了解定位

定位属性position:
static:默认值，表示常规流定位
relative：相对定位，不会导致元素脱离文档流，只是让元素在原来的位置进行偏移
absolate:绝对定位，会让元素脱离文档流，不占据页面位置，且会使元素变为块盒
fixed:固定定位，也会脱离文档流，但包含快为浏览器可视窗口

只要元素的position取值不是static，那么这个元素就是定位元素
只有给了绝对定位和固定定位的元素才会脱离文档流。

二、偏移量

1.了解偏移量

脱离了文档流的元素通过偏移量来调整它在页面的位置：

left：向左移动
right:向右移动
top：向上移动
bottom：向下移动

我们在页面当中使用定位一般是在调整二级菜单，导航栏等位置使用，也会使用固定定位来制作页面中的固定导航。

2.定位的使用

2.1 相对定位以及绝对定位

首先我们新建一个html文件，用三个不同颜色的盒子来做示范：

.box {
            width: 500px;
            height: 500px;
            background-color: green;
        }

        .top {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .button {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

<div class="box">
        <div class="top"></div>
        <div class="button"></div>
    </div>

浏览器显示：

此时可以看见，红盒和蓝盒被绿盒包裹，也就是说绿盒是红盒以及蓝盒的父元素，那么我们要调整红盒蓝盒的位置就需要给绿盒相对定位，给红蓝绝对定位：

.box {
            width: 500px;
            height: 500px;
            background-color: green;
            position: relative;
        }

        .top {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 110px;
            bottom: 70px;
        }

        .button {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            left: 30px;
            top: 100px;
        }

此时：

可以看见红蓝两盒的位置发生了改变。

2.2固定定位

固定定位的代码写法与绝对定位相似，但是他的包含块只会是浏览器的可是窗口，也就是说它只会随着窗口的变化而变化，且永远在窗口的同一位置。

总结

定位在制作网站时使用可以说是很频繁的，但是因为定位元素脱离文档流的特性也会对布局产生影响，所以我们在使用时也需要小心。