虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > Dreamweaver > Dreamweaver教程-CSS定位(positon)教程

Dreamweaver教程-CSS定位(positon)教程
类别:Dreamweaver   作者:码皇   来源:互联网   点击:

DIV+css网页布局中必不可少的就是定位,这一节的知识要和CSS盒子模型知识点结果起来理解。1 相对定位(relative)相对定位是指相对它本来应该处的位置所做的移动。…… …… 我是一段正常的文 ,魔客吧

DIV+css网页布局中必不可少的就是定位,这一节的知识要和CSS盒子模型知识点结果起来理解。

1.相对定位(relative)

相对定位是指相对它本来应该处的位置所做的移动。

    …… ……

    我是一段正常的文本

    我本来应该在它的正下方, 可是relative相对定位让我在正常位置的基础上向右移动了50个像素。

2.绝对定位(absolute)

绝对定位非常好理解,你指定元素出现的坐标(x,y),然后它就准确无误地显示在那里。

    s 我真惨!被用来演示CSS!

    CSS

    绝对定位

定位中使用的left属性表示元素距离左侧的距离,而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x,而top就是纵坐标y。

绝对定位其实也是相对定位

没错,绝对定位会按照我们给定的坐标x,y来准确地定位你一个元素。但是问题在于,坐标系的原点在哪里呢?答案就是父元素。

上例中,class为"dingwei2"的元素设置为绝对定位,它的父元素为body,所以它其实是相对body位置来定位的的。如果有如下代码:

    段落正文 强调文字

若给strong元素设置绝对定位,那么坐标原点将会是父元素p的位置。

相关热词搜索: Dreamweaver教程-CSS定位(positon)教程