层的应用及其定位(绝对定位和相对定位)

  层的随意定位的特性给网页设计者带来的很大的方便,但同时也带来了一定的麻烦。为什么这样说呢?

  大家都知道,为了让网页能够自动地适应用户设置的分辨率,在网页制作过程中人们采用了百分比的设置方式,从而页面的所有元素从新排版,保证原来的格式。但如果你在页面上使用了层,你会发现当浏览器大小改变时,层的位置却没有改变,结果它和其他的元素之间的配合出现了错位现象,页面变得杂乱无章了。而我们是不能够强制用户使用特定的分辨率的,那么就只有想办法让层的位置也能够象表格一样根据浏览器大小的改变而重新定位,这就需要合理地使用相对定位和绝对定位了。

  绝对定位(position:absolute):即层默认的定位方式,绝对于浏览器左上角的边缘开始计算定位数值。

  相对定位(position:relative):层的位置相对于某个元素设置,该元素位置改变,则层的位置相应改变。

  对比两种定位方式,不难发现,使用相对定位的层才是真正实现设计者思想的方式,从而完全掌握层的排版。

  那么,绝对定位有没有用呢?当然有用了,当你的网页全部使用层来排版,而且页面是使用默认的居左放置的,那么使用默认的绝对定位方式可以方便的排版,提高设计的工作效率。

  在Dreamweaver中,插入的层虽然都是使用的绝对(absolute)定位方式,但是插入的方式不同,带来的效果是不同的。前面我们已经知道,使用菜单插入的层是没有定位的坐标的,只有当你使用鼠标拖动该层改变其位置后,才会写入坐标值。而拖拉出来的层的初始位置坐标就是鼠标开始动作时的坐标。

  请明确一个概念:由Dreanweaver赋予坐标值的层是绝对于浏览器边缘定位的层。不带坐标值的层则是相对于某元素定位的层!

  所以,最简单的设置相对定位层的的方式就是:选定插入层的位置(例如某个单元格或者页面中某处)将光标停留在该位置,然后选择Insert-->Layer,即可在该位置创建一个固定大小的层,这个层就是相对于该位置定位的了。需要注意,采用这种方式创建的层,你只可以使用鼠标调整它的大小,绝对不可以移动它的位置!也就是说,在属性面板上,层的位置栏中(Left Top)绝对不可以有数值。

  很多情况下,插入的层的位置并不一定准确,特别是Dreamweaver并非真正的所见即所得的软件,网页的排版只有到浏览器中显示才可以真正看到排版的表现,所以上面所说的方法就显的过于简单而容易出问题了。这个时候,你需要给层一个定位的参照物,让它真正地做到相对的定位。

  简单的参照物可以是一个父层,即先插入一个相对定位的空白的层,在此层中插入你真正需要的层,而这个层是可以随意拖拉改变位置的。但这样毕竟在网页中多插入了一个空白的层,我想它一定不是专业的网页设计师所希望的。下面我们介绍使用CSS来实现真正的相对定位的层。

  我们需要先设置一个CSS Class,来定义定位的方式为相对:

  .ceng { position: relative; }

  然后,赋予你所需要的参照物(可以是 table,tr,td... )一个 CSS属性为这个类。这样浏览器就会以它的左上角为原点,建立新的坐标系。再在这个参照物的下级插入层,则层绝对于该参照物定位,如果你需要改变层的位置,你可以直接在层的属性面板上输入Left Top的数值(不可以使用鼠标拖拉),切记此数值的坐标原点是你所指定的参照物,而不是浏览器的边缘(在Dreamweaver中编辑时,该层看起来象是绝对于页面边缘定位的,但在浏览器中,它是绝对于你所指定的参照物的)。

  很多朋友使用层是为了等到动态的效果,例如使用时间线让某个物体运动起来,增加网页的动感,那么相对定位后的层还可以运动吗?回答当然是肯定的。由于定义对象的两个位置需要拖动该对象改变位置,所以使用简单的层定位的方法是不行的,但如果你使用CSS来设置相对定位的效果的话,那么就完全可以实现了。只是需要注意,定义运动的初始位置和结束位置时,你仍然不可以使用鼠标拖拉,而只能自行输入Left和Top的数值。

  本来层的使用并不是很复杂的,但我却把它单独作为一个章节,原因就是层的定位有一定难度,希望朋友们看过以上的介绍后,在Dreamweaver中多实验几次,否则还是容易出现问题的。

  OK!关于层的使用就说这么多。

时间: 2025-01-19 19:45:20

层的应用及其定位(绝对定位和相对定位)的相关文章

实例演示div+css的绝对定位和相对定位布局

概要:本文主要描述XHTML中相对定位和绝对定位各自的本质.用法.区别和两者之间的关系.以及使用CSS的Left.Right.Top.Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法.(本文的示例,请看这个附件demo.) 说明:占位空间:元素在文档流中所占据的空间.物理空间:元素本身所占据的空间. 下面分3种情况分别对相对定位和绝对定位进行讨论:1.只使用css第一组属性布局定位元素的情况2.只使用css第二组属性布局定位元素的情况3.混合使用第一组和第二组

CSS样式表一席谈之绝对定位与相对定位

css|样式表 定位属性将是网虫们打开幸福之门的钥匙: 绝对定位 H4 { position: absolute; left: 100px; top: 43px } 这项CSS规则让浏览器将起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果. 注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口. 左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离. 设定这些距离时,你

CSS中关于绝对定位和相对定位

css <style>body{margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e{   width: 100px;   height: 100px;   margin: 5 auto;   color: #fff;   background: #000;}.aa, .bb, .cc, .dd, .ee{   top: 10px;   left: 10px;   width: 10px;   height: 10px;   overflow: hi

图例详解网页制作中的绝对定位和相对定位

网页|详解 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(

css布局定位系列:相对定位

css 英文原文:http://brainjar.com/css/positioning/default.asp 翻译:零度,转载请注明本文英文原文出处以及本文地址!由于我英文水平有限,有不懂的地方还请阅读原文,欢迎交流! 相对定位 当一个元素被指明为{position:relative;}的时候,它开始是遵守正常流规则的(也就是说,如果你不给他任何规则,他就和正常的一样,译者注),它周围元素相应的被定位.然后,元素盒根据它的属性值偏移. 请注意上面元素周围的盒子是正常布局的,包括垂直边距的折叠

CSS控制DIV绝对定位、相对定位的技巧

  我们在网页设计中常常会用到position属性,里面有5个值,分别是:absolute.fixed.relative.static.inherit. 常用到的其实就是absolute和fixed. absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. fixed:生成绝对定位的元素,相对于浏览器窗口进行定位. 这两个值的区别在于,一个是相对于static的父元素定位,一个是相对于浏览器窗口定位. 不少朋友在使用absolute的时候发现它"似乎&quo

jquery鼠标放上去显示悬浮层即弹出定位的div层

 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script>  <script>  function show(obj,id) {  var objDiv = $("#"+id+"");  $(objDiv).css("display","block");  $(obj

jquery鼠标放上去显示悬浮层即弹出定位的div层_jquery

复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

实现网页制作中“层”精确定位

网页 在制作网页的时候,我们常常会提到层.这里的层是指在Dreamweaver中,通过对它的应用来实现网页对象在垂直方向互相重叠的效果,比如使用QQ的朋友一定到腾讯主页(http://www.tencent.com/)浏览过,其下拉菜单很有特色,这就是利用层的应用来实现的.其做法很简单,有不少网友在网页中使用层便可以轻松实现,但你是否注意到当你改变显示器分辨率时,你的层还是在原来的位置上.网页能够自动地适应用户设置的分辨率吗?我想如果你不知道层的绝对定位和相对定位的概念,你是做不出腾讯主页上的下