当前位置：首页 » CSS » DIV/CSS：一个贴在左上角的标签
DIV/CSS：一个贴在左上角的标签
来自：新思网络时间：2012-06-12 08:51:37

标签省着用，贴在左上角就可以了。

怎么贴上去的呢？这就用到position属性了。值relative可以让内层div的位置以外层div的左上角为原点，这样就可以做出相对于外层往左上移动一段距离的标签了。

 

<!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>
<style tyep="text/css">
body,div,li{margin:0; padding:0}
#div1{width:200px; height:200px; position:absolute; top:50px; left:50px; border-style:dashed; border-width:1px; border-color:#33CCFF;}
#div2{width:100px; height:30px; background:#3cf; position:relative;top:-10px; left:-10px; line-height:30px; font-size:16px; color:#FFFFFF; text-align:center; font-weight:bold;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绝对位置和相对位置</title>
</head>

<body>
<div id="div1">
<div id="div2">
好不好玩
</div>
</div>
</body>
</html>
关键词：css,标签

分类： CSS 浏览 ( 1717 ) 次