定位属性
定位属性包括相对定位和绝对定位。相对定位指允许元素在相对于文档布局的原始位置上进行偏移，绝对定位指允许元素与原始文档布局分离且任意定位。
1.定位方式position
语法：`position:static|absolute|fixed|relative`
取值说明：static：默认值；
absolute：采用绝对定位，需使用left、right、top和bottom等来进行。
fixed：页面滚动，元素不滚动；
relative：相对定位，对象不可层叠。
2.元素位置top、right、bottom、left
语法：`top:auto|长度值|百分比`
`right:auto|长度值|百分比`
`bottom:auto|长度值|百分比`
`left:auto|长度值|百分比`
取值说明：auto：默认值；
长度值：包含数字和单位，也可用百分比来设置。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
font-size:12px;
position:absolute;
top:26px;
right:23px;
}
-->
</style>
</head>
<body>
<center><img scr="images/1.gif" width="150" height="150"/></center>
<div class="d">授人以鱼不如授人以渔
</div>
</body>
</html>
3.层叠顺序z-index
层叠顺序设置层的先后顺序和覆盖关系。
语法：`z-index:auto|数字`
取值说明：auto：遵从父类对象定位；
数字：整数值，可为负值，默认1。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
position:absolute;
top:26px;
right:23px;
left:20px;
bottom:20px;
z-index:1;
}
.d1{
font-size:20px;
position:absolute;
top:30px;
right:20px;
left:10px;
bottom:25px;
z-index:2;
}
-->
</style>
</head>
<body>
<div><img scr="images/1.gif" width="150" height="150" class="d"/></div>
<div class="d1">授人以鱼不如授人以渔
</div>
</body>
</html>
4.浮动属性float
设置文字在某个元素周围，可应用于所有元素。
语法：`float:none|left|right`
取值说明：none：默认值，表对象浮动；
left：文字浮动在元素的右边；
right：文字浮动在元素的左边。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
font-size:12px;
}
img{float:left}
-->
</style>
</head>
<body>
<img scr="images/1.gif" width="150" height="150"/>
<span class="d">授人以鱼不如授人以渔
</span>
</body>
</html>
5.清楚属性clear
用于指定一个元素是否允许其他元素漂浮在它周围。
语法：`clear:none|left|right|both`
取值说明：none：默认，两边都可有浮动对象；
left：不允许左边有浮动对象；
right：不允许右边有浮动对象；
both：不允许有浮动对象。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
font-size:12px;
clear:left;
}
img{float:left}
-->
</style>
</head>
<body>
<img scr="images/1.gif" width="150" height="150"/>
<span class="d">授人以鱼不如授人以渔
</span>
</body>
</html>
6.可视区域clip
限定只显示裁切出的区域，区域为矩形；矩形只需左上顶点，由top和left两项设置完成，及右下顶点，由bottom和right两项设置完成。
语法：`clip:auto|rect(数字)`
取值说明：auto：默认，对象不裁切；
rect(数字)：根据上、右、下、左提供自对象左上角（0,0）坐标计算的4个偏移数值，任一数都可被auto替换，即此边不剪切。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
position:absolute;
left:7px;
top:50px;
z-index:1;
}
.d1{
position:absolute;
top:30px;
left:7px;
right:20px;
font-size:12px;
z-index:2;
clip:rect(auto,6cm,64px,auto)
}
-->
</style>
</head>
<body>
<div><img scr="images/1.gif" width="150" height="150" class="d"/></div>
<span class="d1">授人以鱼不如授人以渔
</span>
</body>
</html>
7.层的宽度和高度width、height
语法：`width:auto|长度值`
`height:auto|长度值`
取值说明：auto：自动设置长度，以层包含内容为准；
长度值：设置确切长度，需数值和单位。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
position:absolute;
left:7px;
top:50px;
z-index:1;
}
.d1{
position:absolute;
top:30px;
left:7px;
right:20px;
font-size:12px;
z-index:2;
width:450px;
height:50px;
}
-->
</style>
</head>
<body>
<div><img scr="images/1.gif" width="150" height="150" class="d"/></div>
<span class="d1">授人以鱼不如授人以渔
</span>
</body>
</html>
8.超出范围overflow
设置层内容超出层所能容纳范围时显示方式。
语法：`overflow:visible|auto|hidden|scroll`
取值说明：visible：层大小和内容自动显示出来；
auto：内容超出层范围时才自动显示滚动条；
hidden：隐藏超出范围的内容；
scroll：总是显示滚动条。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
position:absolute;
font-size:12px;
overflow:scroll;
width:300px;
height:70px;
left:7px;
top:50px;
}
-->
</style>
</head>
<body>
<img scr="images/1.gif" width="150" height="150"/>
<span class="d">授人以鱼不如授人以渔
</span>
</body>
</html>
9.可见属性visibility
针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。
语法：`visibility:inherit|visible|hidden`
取值说明：inherit：默认，继承父类对象的可见性；
visible：无论父类对象是否可见，子层都是可见的；
hidden：无论父类对象是否可见，子层都隐藏。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.d{
position:absolute;
left:7px;
top:50px;
z-index:1;
}
.d1{
position:absolute;
top:30px;
left:7px;
right:20px;
font-size:12px;
z-index:2;
visibility:hidden;
}
img{visibility:inherit}
-->
</style>
</head>
<body>
<div><img scr="images/1.gif" width="150" height="150" class="d"/></div>
<span class="d1">授人以鱼不如授人以渔
</span>
</body>
</html>
