欢迎访问第1万维网网站!用户名: 密码: [忘记密码]

合作代理 | 在线咨询

您的位置: 第一万维网 >> 设计理念 >> 正 文

详解网页设计中的定位与定位应用

来源:第一万维网   更新时间:2009-4-17 11:06:27

       详解网页设计中的定位与定位应用
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样。如果理清了定位的原理,那定位会让网页实现的更加完美。

定位的定义:

在CSS中关于定位的内容是:position:relative | absolute | static | fixed

static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

fixed 固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级:z-index: auto | namber;

auto 遵从其父对象的定位

namber 无单位的整数值。可为负数

定位的原理:

可以位移的元素 (相对定位)

在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图:




我们看图中是一个宽度为200px,高度为50px,margin:25px; border:25px solid #333; padding:25px; 相对定位的元素,并且位移距上50px,距左50px。而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分,这说明:“当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值,但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后,表现内容已经脱离了文本流,只是在本文流中还为原来的相对定位留下了原有的总宽与总高(内容的高度或是宽度加上margin\border\padding的数值)。这说明在相对定位中,虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的老窩。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。

并且我们注意,定位元素的坐标点是在margin值的左上边缘点,即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的,由些可推,当TRBL为负值时位移的方向是外放的。在图片有位移的箭头指向标识,带有加号的是正值位移方向,带有减号的是负值位移方向。关于位移方位,可以延伸阅读怿飞的《由浅入深漫谈margin属性(一)》

 

最新图片新闻文章

网友正在看下面的相关文章

快捷操作

本栏目最新文章

业界新闻

第一万维网公告

本站最新图片文章

第一万维网QQ客服

为了给您提供更加方便快捷的服务请选择您的服务专员,点击QQ号码即可。
企业在线客服QQ:800015119

第一万维网快速服务导航