绝对定位: absolute, fixed

相对定位: relative

默认值: static

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css中的relative与absolute</title><style>div {height: 100px}</style></head><body><div style="background-color: red;" class="box1">box1</div><div style="background-color: green;" class="box2">box2</div><div style="background-color: pink;" class="box3">box3</div><div style="background-color: yellow;" class="box4">box4</div><div style="background-color: cyan;" class="box5">box5</div></body>
</html>

初始效果代码

 

1. relative: 是相对于原来位置移动, 元素设置此属性仍在文档流中, 不影响去他元素的布局

给第二个元素设置relative, 元素相对于原来位置便宜, 宽高都没变, 撑大了容器

.box2{ position: relative; top: 50px; left: 50px;}

2. absolute: 元素会脱离文档流, 如果设置偏移量, 会影响其他元素的位置定位

给第五个元素设置absolute, 在没有定义宽度的情况下, 宽度有元素中的内容决定, 效果与使用float方法一样

 

.box5{ position: absolute; }

absolute定位原理:

1. 在父元素没有设置相对定位或绝对定位的情况下, 元素相对于根元素定位

        即相对于html元素, 定位在设置的偏移量所在的位置

        设置了absolute的元素脱离文档流, 元素在没有设置宽度的情况下, 宽度由元素里面的内容决定, 脱离后原来的位置相当于是空的, 下面的元素会来占据位置

.box5{ position: absolute; top: 50px; left: 50px;}

CSS中相对定位与绝对定位-编程知识网

 2. 父元素设置了相对定位或者绝对定位, 元素会相对于离自己最近的设置了相对或者绝对定位的父元素进行定位

body{ positon: absolute}

给body标签添加绝对定位, 整个容器的宽度由最长的div决定, 宽度变小了

CSS中相对定位与绝对定位-编程知识网

 与没有设置absolute的情况下比较, 可以看出设置了absolute的box5距离文字要偏远一些

CSS中相对定位与绝对定位-编程知识网