CSS ------ 布局定位

最新推荐文章于 2022-07-20 12:33:27 发布

qq_42412646

最新推荐文章于 2022-07-20 12:33:27 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/102654720

版权

进一步的进行方便的使用，我们可以对不同的盒子进行定位

instance：

<html>
	<head>
		<title>css定位</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			img{
				
			}
			#div1{
				/*border: solid 3px red;
				width: 600px;
				height: 300px;
				margin-left: 100px;
				margin-top: 50px;*/
				background-image: url(../img/0.jpg);
				/*background-size: cover;	*/
			}
			#div2{
				/*border: solid 3px aqua;
				width: 600px;
				height: 300px;
				margin-left: 100px;
				margin-top: 50px;*/
				position: relative;
				left: 100px;
				top: 100px;
				background-color: brown;
				z-index: 1;
				background-image: url(../img/3.jpg);
				/*abackground-size: cover;*/
			}
			#div3{
				/*border: solid 3px ;
				width: 600px;
				height: 300px;
				margin-left: 100px;
				margin-top: 50px;*/
				position: relative;
				background-color: blanchedalmond;
				z-index: 2;
				background-image: url(../img/5.jpg);
				/*background-size: cover;*/
			}
			#div4{
				/*border: solid 3px yellow;
				width: 600px;
				height: 300px;
				margin-left: 100px;
				margin-top: 50px;*/
				background-image: url(../img/9.jpg);
				/*background-size: cover;*/
			}
			#divshow{
				width: 100px;
				height: 100px;
				/*position: fixed;*/
				position: absolute;
			/*	border: solid 3px pink;*/
				left: 100px;
				top: 100px;
				background-image: url(../img/7.jpg);
				/*background-size: cover;*/
			}
			#divfix{
				border: solid 3px pink;
				width: 100px;
				height: 100px;
				position: fixed;
				right: 1px;
				top: 200px;
				background-image: url(../img/dangao.jpg);
				/*background-size: cover;*/
			}
			div{
				background-size: cover;
				border: solid 3px ;
			}
			#div1,#div2,#div3,#div4{
				width: 600px;
				height: 300px;
				margin-left: 100px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">	
			</div>
			<!--<img src="../img/0.jpgmg" alt="" />-->
		</div>
		<div id="div2">
			<div id="divshow">
				
			</div>
			<!--<img src="../img/1.jpg" alt="" />-->
		</div>
		<div id="div3">
			<!--<img src="../img/8.jpg" alt="" />-->
		</div>
		<div id="div4">
			<!--<img src="../img/9.jpg" alt="" />-->
		</div>
		<div id="divfix">
			
		</div>
	</body>
</html>

定位：

position：

相对定位：relative;相对元素移动指定的位置（相对于自己原有的位置）可以使用left，top，right，bottom进行调整。

注意：其他元素的位置是不会改变的。

绝对位置：absolute：位置是绝对的，但是可以加入到一个div中,其是参考父类的div位置的相对位置。如果没有设置父类div，其默认为相对于界面。

固定位置：fixed:将元素固定在某个位置，不随着界面的滑动而改变。同样可以使用left，top，right，bottom进行调整。

qq_42412646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS ------ 布局定位

进一步的进行方便的使用，我们可以对不同的盒子进行定位instance：<html> <head> <title>css定位</title> <meta charset="UTF-8"/> <style type="text/css"> img{ } #div1{ /*...
复制链接

扫一扫