<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>格式布局</title>
<style type="text/css">
*/*针对所有标签起作用*/
{
margin:0px;/*去除所有边距magin表示靠近最近的边*/
padding:0px;/*去除所有间距*/
}
.box
{
opacity:0.5; moz-opactiy:0.5; filter:alpha(opacity=50)
}
</style>
</head>
<body>
position 写在样式表里，也可以写在style里<br />
样式表要优先于style<br />
后写的代码要盖住前写的代码<br />
一、poistion：fixed<br />
锁定位置，例如有些网站的右下角弹窗广告等<br />
相对于浏览器的显示页面定位的<br />
<div style="width:100px; height:100px; border::5px solid blue; background-color:#090;
right:0px; bottom:0px; position:fixed;">fixed显示位置</div>
二、position：absolute 绝对定位<br />
（1）外层没有position：absolute（或relative）那么div相对于heml页面定位。<br />
（2）外层如果有position：absolute（或relative）那么div相对于外层边框定位<br />
<div style=" border:2px solid red; width:400px; height:200px; ">c
</div>
<div style=" border:2px solid red; width:400px; height:200px; position:absolute; ">absolute外层无position:absolute
<div style="border:1px solid red; width:100px; height:100px; right:30px; bottom:50px; background-color:#FF0;position:absolute">
position：absolute有外层position:absolute
</div>
</div>
<div style="border:1px solid red; width:100px; height:100px; right:30px; bottom:50px; background:#FF0; position:absolute">
position：absolute外层无position
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
三、position：relative<br />
相对于默认位置static的移动。自我理解为相对于div插入位置重新定义位置<br />
<div style="width:100px; height:100px; border:5px solid blue; background-color:#993; top:30px; left:100px; position:relative">
relative界面图
</div>
<br />
<br />
<br />
<br />
四、分层(z-index:)<br />
在z轴方向分层，可以理解为一摞纸，层数越高越靠上。<br />
z-index值默认为1，需要位于上面的值大于下面的值<br />
<div style="border:1px solid orange; width:100px; height:100px; left:30px; top:30px; position:relative; background-color:#00C;
z-index:2">分层1</div>
<div style="border:1px solid orange; width:100px; height:100px; left:50px; bottom:50px; position:relative; background-color:#00C;">分层2</div>
<br />
<br />
overflow:hidden;//超出部分隐藏；scroll，显示滚动条<br />
<div style="border:1px solid orange; width:100px; height:100px; left:30px; top:30px; position:relative; background-color:#00C;
overflow:hidden;">分层1
<div style="border:1px solid orange; width:100px; height:100px; left:50px; bottom:50px; position:relative; background-color:#00C;
">分层2
</div>
</div>
<br />
<br />
<br />
<br />
五、float：left、right<br />
<!--<div style="clear:both"></div> 截断流 -->
<div style="border:1px solid orange; width:50px; height:100px; background-color:#00C;
float:left;">1</div>
<div style="border:1px solid orange; width:50px; height:100px; background-color:#00C;
float:right;">2</div><br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
半透明效果<br />
<div style="background:#900;"class="box">透明区域</div>
</body>
</html>
时间： 2024-10-09 22:02:29