好久不写CSS代码 感觉忘的差不多了，代码就是要多敲才行的。就行武林中的武者一样，每天都要勤加练习才可。
正好写写博客，就当复习复习。
position 主要是用来 元素的定位方式
static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 绝对定位，不随滚动框改变位置。
下面是一些代码示例，有兴趣的可以敲一下，知识都在代码里。
<!DOCTYPE html>
<html>
<head>
<title>囚徒</title>
<meta charset="utf-8" />
<style type="text/css">
h2.a{ /* 绝对定位 */
position:absolute;
left:200px;
top:150px;
}
h3.b{ /* 相对定位 */
position:relative;
left:-20px;
}
h3.c{ /* 相对定位 */
position:relative;
left:20px;
}
h2.d{
position:fixed;
top:50px;
right:30px;
}
img.v{
position:absolute;
clip:rect(0px,50px,200px,0px);/*修剪为矩形*/
}
img.x{
position:absolute;
left:200px;
top:100px;
z-index:-1; /*等于-1 默认是0的 那么他的优先级就更低了，字体就在图片上了。*/
}
</style>
</head>
<body>
<h2 class="a">赏金猎人，女枪正在大杀特杀。</h2>
<h3 class="b">皮城女警，终结了蛮王的大杀特杀，完成三连杀。</h3>
<h3 class="c">皮城女警，终结了蛮王的大杀特杀，完成三连杀1。</h3>
<h2 class="d">提莫队长正在待命</h2>
<p><img class="v" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
<p><img class="x" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
</body>
</html>
时间： 2024-10-18 11:13:59