网页定位position
保证网站好看，令人心仪，就要保证网页中文字，图片，flash，等等的位置，看看国内仍然有很多网站很粗略，给人以不够严紧，松松垮垮的感觉，学习网站设计，可以多看看国外的网页设计，看多了，自己心里就有数了，但是在网页上，利用HTML标签进行文字和图像的定位是一件很困难的事，即时用表格，也不能保证精确性。因为浏览器和平台的不同，结果会发生不同变化。
然而，利用CSS定位属性position，就可以精确的设定对象的位置，还可以对对象进行叠放处理。
其语法如下：
position:<absolute | relaive > ;left:<值>; top:<值>; [width:<值>]; [height:<值>]; [visibility:<值>]; [z-index:<值>]
其中：
1，position属性用于对象的定位。它的参数有absolute和relaive两种。
absolute表示绝对定位。绝对定位能精确的设定对象在网页中的独立位置，而不考虑网页中其他对象的位置，在绝对定位中对象的位置是相对于浏览器的窗口而言的。
relaive表示相对定位。它所定义的对象的位置是相对于不使用定位设置时该对象在网页中所分配的位置，即相对定位的关键在于被定位的对象位置是相对于它通常应在的位置而言的。如果停止使用，则文字的显示位置将恢复。
2，left属性用于设定对象距离浏览器左边的距离；top属性用于设定对象距离浏览器顶部的距离。
3，width属性用于设定对象的宽度。因为定位后的对象在网页上显示时仍然会从左到右一直显示，利用宽度属性就可以设定对字符向右显示的限制。它只在绝对定位时使用。
4，height属性用于设定对象的高度，height和width类似，只不过方向是垂直方向。
5，visibility属性用于对象是否显示。该属性对于被定位和未被定位的对象都适用。
它有三个参数：
visible：对象可以看到；
hidden：对象隐藏；
inherit：对象被继承母体对象的可视性设置，母体可见就可见，不可见对象就不可见。
6，z-index属性用于在网页上重叠文字和图片。当定位多个对象，并把它们重叠时，可以用z-index来设定哪个对象放在最上。它的参数值是整数，用于绝对定位或者相对定位，也可以用于给图片设定属性。
上面看起来有点复杂，下面动手看看，就不会了。
举例说明下面的图片名称大家自己可以随便定，图片地址要正确，建议大家改改参数找找感觉，
例1，绝对定位。
<html>
<head>
<title>绝对定位absolute</title>
<style type="text/css">
<!--
#site{position:absolute;top:100px;left:100px}
-->
</style>
</head>
<body>
<center>
<h4>图片设置大小为top:100px;left:100px</h4></center>
<img id=site src="133.jpg">
</body>
</html>
例2，相对定位。
<html>
<head>
<title>相对定位relative</title>
<style type="text/css">
<!--
#site{position:relative;top:10px;left:40px}
-->
</style>
</head>
<body>
<center>
<h4>图片设置大小为top:10px;left:40px</h4></center>
<img id=site src="133.jpg">
</body>
</html>
例三，使用z-index设置区域的层次高低。
<html>
<head>
<title>层次z-index</title>
<style type="text/css">
<!--
.z1{font-size:18pt;background-color:pink;width:4cm;height:2cm;
position:absolute;top:3cm;left:4cm;z-index:100}
.z2{font-size:11pt;background-color:green;width:5cm;height:3cm;
position:absolute;top:13cm;left:24cm;z-index:50}
.z3{font-size:23pt;background-color:skyblue;width:34cm;height:2cm;
position:absolute;top:5cm;left:8cm;z-index:10}
-->
</style>
</head>
<body>
<div class=z1>z-index为100</div>
<div class=z2>z-index为50</div>
<div class=z3>z-index为10</div>
</body>
</html>
例四，设置文字和图片的层次。
<html>
<head>
<title>设置文字和图片的层次z-index</title>
<style type="text/css">
<!--
.z1{position:absolute;top:1cm;left:2cm;z-index:1}
.z2{font-size:11pt;color:green;
position:absolute;top:3cm;left:2cm;z-index:2}
-->
</style>
</head>
<body bgcolor=#fff000>
<div class=z1><img src="olserve.jpg"</div>
<div class=z2>杭州尚线网络技术有限责任公司，网站建设技术一流</div>
</body>
</html>
下节课，我会举两个设置文字阴影和三维效果的例子。欢迎大家来看看。
本课主题：网页定位position
相关主题：
设置边框属性border
设计网站边框的样式border-style
网站边框颜色
设计网站的边框宽度
网站设计边界margin
请拨打热线：0571-86586571