本文主要讨论CSS中的相对定位（relative）和绝对定位（absolute）。相对定位不脱离标准流，通过top、bottom、left和right改变自身位置，常与绝对定位配合使用。绝对定位脱离文档流，依据最近的含有定位的祖先元素定位。两者常用于创建需要元素在页面中移动且不影响其他元素布局的效果。
定位布局
在定位布局中有五种定位，分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。我主要要说的是相对定位和绝对定位，一般这两个都是一起出现的。更可以说相对定位是为了当绝对定位的父亲而出现的。
相对定位（relative）
相对定位顾名思义，相对于某元素产生位移，而这个某元素就是自己本身，也就是说元素移动的时候是相对于【当前元素所在的位置】进行移动。
通过top、bottom、left和right来改变自己的位置
书写方式为 position:relative
除了这些他还有一些特性，相对定位是不脱离标准流（文档流）的，原先的位置依旧保留。不过移动后的位置会与其他元素发生层叠。代码效果图如下
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
最低0.47元/天 解锁文章
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
