<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Absolute positioning | Transcending CSS</title>
<style type="text/css">
/* Normalizes margin, padding */
body, ul, li, h3, p { margin : 0; padding : 0; }
/* Normalizes font-size for headers */
h3 { font-size : 100%; }
/* Removes list-style from lists */
ul { list-style : none; }
/* Removes border from fieldset and img */
img { border : 0; }
html { text-align : center; }
body {
width : 80%;
margin : 0 auto;
padding : 40px 0;
background-color : #fff;
font : 72%/1.6 "Lucida Grande","Lucida Sans Unicode", Verdana, sans-serif;
color : #333; }
ul {
position : relative;
float : left;
width : 316px;
margin-right : 20px;
padding : 350px 10px 40px 10px;
background-color : #fcf3ea;
border : 1px solid #dab69c; }
li, h3, p { display : inline; }
li p { color : #666; }
h3 img {
position : absolute;
padding : 1px;
height : 100px;
width : 100px;
outline : 1px solid #ccc; }
li#pomegranate h3 img { top : 10px; left : 10px; }
li#carrot h3 img { top : 10px; left : 115px; }
li#onion h3 img { top : 10px; left : 220px; }
li#gourd h3 img { top : 115px; left : 10px; }
li#strawberry h3 img { top : 115px; left : 115px; }
li#lily h3 img { top : 115px; left : 220px; }
li#fig h3 img { top : 220px; left : 10px; }
li#wine h3 img { top : 220px; left : 115px; }
li#bean h3 img { top : 220px; left : 220px; }
a:hover img {
z-index : 100;
width : 160px;
height : 160px;
padding : 5px;
background-color : #fff;
border : 1px solid #333; }
li#pomegranate h3 a:hover img { top : -30px; left : -30px; }
li#carrot h3 a:hover img { top : -30px; left : 80px; }
li#onion h3 a:hover img { top : -30px; left : 180px; }
li#gourd h3 a:hover img { top : 80px; left : -30px; }
li#strawberry h3 a:hover img { top : 80px; left : 80px; }
li#lily h3 a:hover img { top : 80px; left : 180px; }
li#fig h3 a:hover img { top : 180px; left : -30px; }
li#wine h3 a:hover img { top : 180px; left : 80px; }
li#bean h3 a:hover img { top : 180px; left : 180px; }
a:link, a:visited, a:hover, a:active {
text-decoration : underline;
color : #894a4f; }
</style>
</head>
<body>
<ul>
<li id="pomegranate">
<h3><a href="#pomegranate"><img src="1-1.jpg" alt="" />Pomegranate</a></h3>
</li>
<li id="carrot">
<h3><a href="#carrot"><img src="1-2.jpg" alt="" />Carrot</a></h3>
</li>
<li id="onion">
<h3><a href="#onion"><img src="1-3.jpg" alt="" />Onion</a></h3>
</li>
<li id="gourd">
<h3><a href="#gourd"><img src="1-4.jpg" alt="" />Gourd</a></h3>
</li>
<li id="strawberry">
<h3><a href="#strawberry"><img src="1-5.jpg" alt="" />Strawberry</a></h3>
</li>
<li id="lily">
<h3><a href="#lily"><img src="1-6.jpg" alt="" />Lily</a></h3>
</li>
<li id="fig">
<h3><a href="#fig"><img src="1-7.jpg" alt="" />Fig</a></h3>
</li>
<li id="wine">
<h3><a href="#wine"><img src="1-8.jpg" alt="" />Wine</a></h3>
</li>
<li id="bean">
<h3><a href="#bean"><img src="1-9.jpg" alt="" />Bean</a></h3>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号