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

2016-02-19 14:33 6 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐CSS层的应用及其定位(绝对定位和相对定位),赶紧看过来吧!

【 tulaoshi.com - Web开发 】

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

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

  绝对定位(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!关于层的使用就说这么多。

来源:http://www.tulaoshi.com/n/20160219/1607183.html

延伸阅读
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title层固定位置练习--by 阿会楠/title style type="text/css" html,body{ ...
标签: Web开发
在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使...
标签: Web开发
今天做页的时候,遇到了一个问题:div无法对父对象绝对定位。 div id="fa"      div id="so" style="position:absolute; top:0; right:12px"      /div /div 但是发现无论怎么调整都是针对body定位,郁闷! 看了下css手册,也没发现有什么不对。到网上查了下...
绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用,也可以结合在一起,相辅相成。 进入论坛参与讨论 但是,我们常用的布局并没有这么简单,除了三栏之外,我们还需要一个页头和一个页脚,如下图: 这时候,再用绝对定位布局就行不通了,因为绝对定位的元素会从文档流中完全移除,这时,页脚会紧挨着页头,显示在页头的下方。 如...
标签: Web开发
在使用css创建类似title属性提示框,常见的方法是使用绝对定位,用负值使其偏移于屏幕之外,在鼠标经过时定义一个合适的正值使其显示到我们所需要的位置。但是,有一个我们不常用的属性我们常常将其搁置一旁而未加利用--auto。《Auto Positioning for Absolute Elements 》这篇文章详细介绍了该属性的使用方法,本人曾翻译了此文--《绝...

经验教程

342

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部