----关于position的四个标签----

从【 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标签页面滑动效果