<!DOCTYPE html>
<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>相对定位</title>
<style>
/*
一、定位：将盒子指定到页面的中的任意位置。
1.position 属性可以开启元素的定位
可选值：
static 没有开启定位（默认值）
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘性定位
2.开启定位后通过 top right bottom left 四个属性设置元素的位置
二、相对定位
1.相对于元素原来的位置进行定位
2.相对定位元素会提升一个层级
3。相对定位元素不会脱离文档流
4.相对定位元素不会改变元素的显示模式（块还是块，行内还是行内）
5。元素移动后原来的位置依然占用
*/
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #c7edcc;
/*开启元素的定位*/
position: relative;
/*移动元素的位置*/
left: 300px;
top: 300px;
}
.box2{
background-color: #fed6e0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)