<!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>Document</title>
<link rel="stylesheet" href="定位.css">
</head>
<body>
<!-- <div class="box2">
<div class="box1"></div>
<em>
<img src="hot.png" alt="">
</em>
</div> -->
<!-- <em>
<img src="固定定位.png" alt="">
</em> -->
<!-- <div class="dog">
</div> -->
<!-- <p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p>
<p>sldfjasdjfa</p> -->
<div>
asdfasdfa
</div>
<span>
asdfasdf
</span>
</body>
</html>
/* 1.相对定位相对自身原来的位置移动
2.原来在标准流中的位置继续占有,后面的盒子仍然以标准流
的方式对待他,不脱标,继续保留原来的位置 */
/* .box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: red;
} */
/* 据对定位
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
2.以最近一级有定位的祖先元素为准
3.绝对定位不再占用原来的位置 */
/* .box1 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
position: relative;
width: 500px;
height: 500px;
background-color: purple;
}
.box2 em {
position: absolute;
top: 4px;
right: -4px;
} */
/* 固定定位
1.以浏览器可视窗口为参照点
2.跟父元素没有关系
3.不随滚动条移动
4.固定定位不占原来的位置 */
/* em {
position: fixed;
top: 100px;
left: calc(50% + 300px)
}
.dog {
margin: 0 auto;
width: 600px;
height: 2000px;
background-color: pink;
} */
/* 定位的特殊属性
1.行内元素添加绝对定位或者固定定位,可以设置宽度和高度
2.块级元素添加定位,如果不指定宽度和高度,默认是其内容大小*/
div {
position: absolute;
background-color: red;
}
span {
width: 200px;
height: 200px;
position: relative;
top: 200px;
background-color: red;
}
