定位属性：
案例一：position：absolute；
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/one.css"/>
<title></title>
</head>
<body>
<!--十二张300*300的图片-->
<div id="gm-img">
<img src="img/g1.jpg"/>
<img src="img/m1.jpg"/>
<img src="img/g2.jpg"/>
<img src="img/m2.jpg"/>
<img src="img/g3.jpg"/>
<img src="img/m3.jpg" class="a"/>
<img src="img/g4.jpg"/>
<img src="img/m4.jpg"/>
<img src="img/g5.jpg"/>
<img src="img/m5.jpg"/>
<img src="img/g6.jpg"/>
<img src="img/m6.jpg"/>
</div>
<!--十二张300*300的图片-->
</body>
</html>
/*全局*/
*{ margin: 0px; padding: 0px; font-size: 0;}
img{ height: 300px; width: 300px; margin: 0px; padding: 0px;} /*图片大小都为300*300px*/
/*全局*/
/*
定位：position： absolute；top：（值）；left：（值）；
absolute，绝对定位，相对于祖先元素的位置。本身不占位置。
*/
.a{ position: absolute;
top: 200px;
left:200px
}案例截图：
案例二：position：relative；
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/one.css"/>
<title></title>
</head>
<body>
<!--十二张300*300的图片-->
<div id="gm-img">
<img src="img/g1.jpg" />
<img src="img/m1.jpg"/>
<img src="img/g2.jpg"/>
<img src="img/m2.jpg"/>
<img src="img/g3.jpg"/>
<img src="img/m3.jpg" class="a"/>
<img src="img/g4.jpg"/>
<img src="img/m4.jpg"/>
<img src="img/g5.jpg"/>
<img src="img/m5.jpg"/>
<img src="img/g6.jpg"/>
<img src="img/m6.jpg"/>
</div>
<!--十二张300*300的图片-->
</body>
</html>
/*全局*/
*{ margin: 0px; padding: 0px; font-size: 0;}
img{ height: 300px; width: 300px; margin: 0px; padding: 0px;} /*图片大小都为300*300px*/
/*全局*/
/*
定位：position： relative；top：（值）；left：（值）；
relative，相对定位，相对于自身定位，保留自身元素的占位。
*/
.a{ position: relative;
top: 200px;
left:200px
}案例截图：
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
