《网页CSS排版制作绝对和相对定位》由会员分享,可在线阅读,更多相关《网页CSS排版制作绝对和相对定位(10页珍藏版)》请在金锄头文库上搜索。
1、定位标签:position包含属性:relative(相对) absolute(绝对)1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素相对于它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。班级晚会的主持人是这个班的学生,但是观众席中不要他的位置。(因为
2、绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏
3、览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。 一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。Relative,CSS中的写法是:positio
4、n:relative; 他的意思是相对定位,他是参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。body padding:20px;a color:#00f; text-decoration:none;a:hover color:#f60; position:relative; top:1px; left:1px;#layout width:600px; margin
5、:0 auto; background:#eee; position:relative;#new position:absolute; top:-15px; left:140px; 这里是内容这里是链接这里也是内容插入DIV先写内容,在写文字连接,接着内容删除掉下图所示的提示文字输入以下文字选择“这个是链接”5个字符,在属性面板上的链接中输入 # 个符号,代表这个是链接,链接目标现在为空。新建 a:hover 伪类规则。定义为相对定位。观看效果,重新打开规则F12预览,观看鼠标移动到文字上时候相对定位偏移位置的效果。可以试着加大左移7个像素位置,F12预览,看文字重叠效果。下面加上那个新的图片动画。绝对定位:这个是内容这个是链接这个也是内容F12预览,看效果,下面对new进行绝对定位,设置:这是相对浏览器,0 0 左上角 绝对脱离了原来的文档流。设置偏移到位置为layout设置居中,设置背景色观察效果。看到这个偏移了,但是图片没有移动位置。绝对位置就是这样的。位置不动拖动浏览器进行宽度调整,位置仍然不动的。3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角设置layout为相对定位。重新调整位置即可。缩小浏览器的宽度,可以看到位置不错。