定位布局
在定位布局中有五种定位,分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。我主要要说的是相对定位和绝对定位,一般这两个都是一起出现的。更可以说相对定位是为了当绝对定位的父亲而出现的。
相对定位(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;
}