css-定位

莫言秋语

于 2018-04-10 09:06:33 发布

阅读量123

点赞数 1

分类专栏： css属性

本文链接：https://blog.csdn.net/moyanqiuyu/article/details/79875494

版权

css属性专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定位属性：

案例一：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
}

案例截图：