相对位置
属性:position
属性值:relative
改变位置的参照物是自己原来的位置
特点:
原来的位置是占用状态,其他元素无法使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height:200px;
background-color:red;
}
</style>
</head>
<body>
<p>hello world</p>
<div></div>
<p>hello world</p>
</body>
</html>
两串文字包裹着文字
将位置改成相对位置,与原先的位置顶部相距100px
div{
position: relative;
top:100px;
height:200px;
background-color:red;
}
第二串文字被遮盖了
绝对位置
属性:positon
属性值:absolute
改变位置的参照物是父元素
原位置不会占用
固定位置
属性:position
属性值:fixed
元素的位置在网页滚动时不变