|
CSS布局教程:绝对定位和相对定位 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。 说明： 占位空间：元素在文文件流中所占据的空间。 物理空间：元素本身所占据的空间。 下面分3种情况分别对相对定位和绝对定位进行讨论： 1.只使用css第一组属性布局定位元素的情况 2.只使用css第二组属性布局定位元素的情况 3.混合使用第一组和第二组属性的情况 图1为未定位时的初始效果， 层级关系为： <div <div box1 <div box2 <div box3 效果图：  图1 一、用相对定位布局块级元素 元素设置position值： position:relative 此属性值的设置，元素没有脱离文文件流，还是普通流定位模型的一部分，会对文文件流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素） 1.仅使用left、right、top和bottom属性布局相对定位元素的情况 元素原本所占的占位空间仍保留，物理空间偏移。 图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其它块级元素的位置没有被影响，可见box2的占位空间还是存在的。 层级关系为： <div <div box1 <div box2 ——– position:relative ; top:-60px; left:80px; <div box3 效果图：  图2 2.仅使用margin属性布局相对定位元素的情况 用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文文件流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值 图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。 层级关系为： <div <div box1 ——– position:relative ; margin-bottom:-102px; <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px; <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px; 效果图：  图3 3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况 此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。 图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px) 层级关系为： <div <div box1 ——- position:relative ; margin-bottom:-102px; <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px; <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px; 效果图：  图4 (责任编辑：熊猫蜀黍) |