position:raletive定位【原创】

经过了昨天的初步研究，和今天的调试部署，终于，把一个历史时间轴的效果给发布到公司官网上去拉哈。很有成就感！通过这个实例，昨天，是对jQuery的基本语法形式有了一定的认识，今天，则是对于昨天遗留下来的相对定位问题，又有了一定的理解。

 

完整效果图如下，地址：(http://www.rsagroup.com.cn/2012/en/aboutus/historyglobal.aspx)

关于相对定位，我的理解是，首先，它和浮动定位，绝对定位的最本质区别是：它仍旧处于文档流布局当中，并且，原始位置仍旧保留。

 

比方上图，这个历史滚动效果的两个左右按钮，被设定在一个层内（流式布局顺序我用的是，先按钮层（上图中为了演示，临时添加了背景蓝色），再是主题的文字和图片内容，这里，虽然对按钮所在层做了相对定位（相对顶部一定距离，外加z-index），但是，可以从画面中看到，如果不对主体内容所在层做一定的相对顶部上移的话，主题到上面的导航条之间是会有一定宽度的空白的，这个空白是什么？就是这个做了相对定位的按钮层啊！可见相对定位的效果，是可以让你产生相对位移，但是原始位置仍旧保留，不会被其他东西占据。

 

上述例子中，对主体内容层和按钮层都做了相对定位，其实，换一下层的先后顺序（主体层先，按钮层后），将会不需要对主体做相对定位。

 

不多说了，贴上完整代码，备忘。

<style type="text/css">
	
	#ibox{ width:950px; height:535px; MARGIN:0px; overflow:hidden;    }
	.timeline_arrow a{font-size:36px;color:#FFF; display:block; height:45px; width:40px;background-color:#666; text-align:center; vertical-align:middle;}
	.timeline_arrow a:link{  }
	.timeline_arrow a:hover{
	background-color:#6BB1B6;
	text-decoration: none;
}
	.block {height: 900px; width:1700px; display:block; position:relative; left:0px; line-height:150%; top:-90px; }  
    
	.block ul{margin:0px; padding:0px; border:0px;}
	.block ul li{float:left;margin:0px; padding:0px; border:0px; }
	.line_right{ width:100%; text-align:right;}
	.line_left{ width:100%; text-align:left;}
    .year {
	font-weight: bold;
	color: #5A2D7F;
}
    
</style> 

 

<div id="ibox">
    <!--*****************************************按钮层***************************************-->
	<div style="position:relative; width:100%; top:250px; z-index:2;">
    	<span id="left" class="timeline_arrow" style="background-color:#C00; width:100px;"><a><</a></span>
    	<span id="right" class="timeline_arrow" style="background-color:#399; width:30px; position:relative; left:910px; top:-45px;"><a>></a></span>
    </div>
    <!---************************主体层*******************-->
    <div id="img" class="block">
    
        <!--******************************************图片上方时间轴************************************************-->
        <div style="width:100%; display:block; height:65px;">		
        <ul style="list-style:none; ">
    	    <li style="position:relative; left:50px; width:250px; left:50px;">
           		 
                 <div class="year">1765</div>
                	    We insure the home of Captain James Cook, prior to the first of his legendary voyages<br/>|
            </li>
            <li style="width:276px; position:relative; left:70px;">
                	    <div class="year">1884</div>We cover Down House, where Charles Darwin wrote On the Origin of Species<br/>|
            </li>
            <li>
        	    <div style="width:150px; position:relative; left:150px;">
                	    <div class="year">2006</div>We became the first carbon-neutral UK insurer<div class="line_right">|</div>
                    </div>
            </li>
            <li>
        	    <div style="width:210px; position:relative; left:300px;">
                	    <div class="year">2008</div>We help rebuild port facilities at Galveston in Texas, after Hurricane Ike
                        <div class="line_right">|</div>
                    </div> 
            </li>
            <li style="width:250px; position:relative; left:320px;">
                	    <div class="year">2009</div>
                	    We take part in the reconstruction of the Italian city of L’Aquila following an earthquake
                        <div class="line_right">|</div>
            </li>
        </ul>
         </div>
         <!--*************************************中间图片区**********************************************-->
        <div style="display:block; width:100%; position:static;">
            <ul style="list-style:none; ">
                    <li><img alt="cook" src="/2012/images/aboutus/cook.jpg" width="276" height="360" /> </li>
                  <li><img alt="darwin" src="/2012/images/aboutus/darwin.jpg" width="404" height="360" /> </li>
                  <li><img alt="turbine" src="/2012/images/aboutus/turbine.jpg" width="394" height="360" /></li>
                  <li><img alt="galveston" src="/2012/images/aboutus/galveston.jpg" width="197" height="360" /></li>
                  <li><img alt="laquila" src="/2012/images/aboutus/laquila.jpg" width="268" height="360" /></li>
                </ul>
        </div><!--核心图片展示结束-->
        
            <!--****************************************图片下方时间轴********************************-->
             <div style="display:block; width:100%;"> 
                 <ul style="background-color:#990">
                    <li style="position:relative;left:0px;">
                        <div class="line_left" >|</div>
                        <div class="year">1710</div>The Sun Fire Office is established
                    </li>
                    <li style=" position:relative;left:160px; width:200px;">
                        <div class="line_left" >|</div>
                            <div class="year">1959</div>The Sun Insurance Office merges with The Alliance Assurance Company to form Sun Alliance Insurance Limited
                    </li>
                    <li style="position:relative;left:160px; width:237px;">
                            <div class="line_left">|</div>
                            <div class="year">1996</div>Sun Alliance Group merges with Royal Insurance Holdings, to become Royal & Sun Alliance Insurance Group plc
                    </li>
                    <li style="position:relative;left:250px; width:237px;">
                        <div class="line_left">|</div><div class="year">2001</div>MORE TH>N launches in the UK
                         
                    </li>
                    <li style="position:relative;left:400px; width:150px;">
                            <div class="line_left">|</div>
                            <div class="year">2008</div>Royal & Sun Alliance becomes RSA Insurance Group plc
                    </li>
                </ul>
            </div><!--图片下方时间轴结束-->