|
【学习精确定位代码】
在做帖时,我们常常为不能把内容准确地放到指定位置上而发愁. 其实用CSS定位代码很容易解决这个问题的. 而且它可以精确到一丝一毫.
先看代码:
style="position: relative; top: 80px; left: 90px;"
说明:
style 样式(或风格)
position 定位属性, 他的值有: relative 相对定位. absolute 绝对定位. static 静态定位.
top 位置属性,离上边的距离,值可绝对(如80px)或相对(如60%),他可以是负数.
left 位置属性,离左边的距离,值可绝对(如80px)或相对(如60%),他可以是负数.
这里只要理解相对定位和绝对定位的含义就可以了, (静态定位和相对定位有点相似). 顾名思义, 相对和绝对只是参照物的不同而已.
相对定位: 相对于所在容器的定位, 表格,论坛楼面,空间等等都是容器. 绝对定位:整个论坛叶面或整个空间的左上角为起始点.只有将它放在相对定位里时,它才会以相对定位为参照物. 起始点就是坐标为0,0的点,位置属性top和left就是以他为起点,规定向下或向右移动多少.如果是负数就是向上和向左移动多少. 那么到底怎么用呢,很简单的,将上面的相对定位代码放到你要定位的标签里就可.
如: <img src="图片地址" style="position: relative; top: 80px; left: 90px;" ......>
如: <table style="position: relative; top: 80px; left: 90px;" ......>
如: <embed style="position: relative; top: 80px; left: 90px;" ......>
如: <marquee style="position: relative; top: 80px; left: 90px;" ......> 等等,
然后调节位置属性top和left到你最满意的位置. 这个定位代码有个很重要的特点,就是用它定位的内容,后面的永远覆盖前面的.
所以代码前后位置要准确. 就算只用一个也要给它留好位置,除非是故意要覆盖. 如果已有style=""怎么办,将代码position: relative; top: 80px; left: 90px;也放进去就可. 注意写法:属性和值之间用冒号":",属性和属性之间用分号";",所有互相之间空格不讲究. 如果代码没地方放或无效怎么办,有个懒办法:
<div style="position: relative; top: 80px; left: 90px;">要定位的内容</div>
不要忘了收尾,很重要的 ! 好了,就这么简单,当你遇到定位困难时,就拿它去试试. 如还有问题,我们再一起讨论.
我用的最多的写法:
<DIV style="position:relative; top:80px; left:90px; width:360px; height:280px; overflow: hidden">
<div style="position: absolute; top: 130px; left: 50px">
第一层内容 </div>
<div style="position: absolute; top: 30px; left: 20px">
第二层内容 </div>
<div style="position: absolute; top: 66px; left: -50px">
第三层内容 </div>
............
</DIV>
说明:
第一个<DIV ......>是相对定位代码,它主要作用是定可显示的范围(由规定的宽和高组成的容器),如这里定为 width:360px; height:280px;.当然,位置属性top和left可以调节这个容器在楼面的位置.(或放到其它容器里位置)
下面几个<div ......>是绝对定位代码,每个都覆盖前一个,起到层的作用.所有的层绝对跑不到这个容器的外面,也就是说随便怎样调节位置属性top和left,都只能在这个<DIV ....>规定的范围内显示.当然调到外面就看不见了.
要注意不要忘记写收尾.不写后果是很严重的. 代码的大小写其实效果是一样的,上面这样写法是为了以后寻找和修改的方便.
在居中页面中使用层，最大的问题就是层的定位问题，当改变显示器分辨率后，层相对其它居中元素就会改变位置。本文介绍层相对其它居中元素不会错位的方法。
层的绝对定位和相对定位
层的绝对定位代码：
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
层的相对定位代码：
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
说明:
在居中页面中，插入相对定位层代码，层的位置在页面居中。但是它变得不可移动，使用不够方便。
插入绝对定位代码，当left和top含有正负数值，层就无法居中。当清除left和top属性后，层可以居中，相对页面其它居中元素没有错位现象。
|
