<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<
title
>相对定位
</
title
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<
link
rel=
"stylesheet"
type=
"text/css"
media=
"screen"
href=
"main.css"
/>
<
script
src=
"main.js"
>
<
/
script
>
<
style
type=
"text/css"
>
.one{
width:
100px;
height:
100px;
background-color:
red;
/* position: relative; */
}
.two{
width:
100px;
height:
100px;
background-color:
green;
position:
relative;
/* 相对定位 */
/* ☞元素设置了相对定位后占原来的位置
☞设置相对定位以自己的位置为参照设置位置 */
left:
10px;
top:
20px;}
/* ☞相对定位不能进行元素的模式转换
☞子绝父相(子元素设置绝对定位,父元素设置相对定位) */
span{
width:
100px;
height:
100px;
background-color:
red;
position:
relative;
}
<
/
style
>
</
head
>
<
body
>
<
span
>
相对定位
</
span
>
<!-- <div class="one">
</div>
<div class="two">
</div> -->
</
body
>
</
html
>