本文介绍了一种使用CSS绝对定位的方法，通过具体的HTML示例展示了如何让元素相对定位，并在其内部使用绝对定位来实现特定效果。
<!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" />
<style type="text/css">
ul li{float:left;width:100px;height:50px;background:#f00;}
ul li.a{position:relative;}
ul li.a span{position:absolute;left:50px;top:-10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li class="a">3333<span><img src="http://www.gnrcn.com/blog/wp-content/themes/wpdesigner5/images/tag_green.gif" /></span></li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul li{float:left;width:100px;height:50px;background:#f00;}
ul li.a{position:relative;}
ul li.a span{position:absolute;left:50px;top:-10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li class="a">3333<span><img src="http://www.gnrcn.com/blog/wp-content/themes/wpdesigner5/images/tag_green.gif" /></span></li>
</ul>
</body>
</html>
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
