从【 two1-4 】分别为absolute,fixed,static,relative标签
四个标签下位移值相同,【 two2 】和【 two1 】都出现在左上角,【 two2 】 盖住了【 two1 】
附上部分源代码:
HTML:
<div class="box" id="one">One</div>
<div class="box" id="two1">Two1</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
CSS:
.box {
display: inline-block;
width: 100px;
height: 100px;
background: #ff8353;
color: white;
}
#two1 {
position: absolute;
top: 20px;
left: 20px;
background: #452589;
}
body
{
height:4000px;
}
two4 】为relative标签,出现在正常流当中,能设置位移
two3 】为static标签,出现在正常流当中,不能设置位移
two2 】为fixed标签,不出现在正常流当中,不能设置位移,随页面滚动
two1 】为absolute标签,不出现在正常流当中,能设置位移
如图的【 two2 】为fixed标签页面滑动效果