css position 示例

最新推荐文章于 2025-07-24 10:12:27 发布

五里一徘徊孔雀东南飞

最新推荐文章于 2025-07-24 10:12:27 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS position

本文链接：https://blog.youkuaiyun.com/u011453546/article/details/19254821

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML和CSS中div元素的布局与定位方法，包括使用position属性实现绝对定位，并通过z-index调整元素层级，同时展示了如何利用div、图片元素进行网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style type="text/css">
			body{
				border:1px red solid;
			}
			div{
				width:140px;
				height:100px;
			}
			#ha{
				border:1px red solid;
				background-color:red;
				position:absolute;
				top:40px;
				left:40px;
				z-index:5;
			}
			#hi{
				border:2px green solid;
				background-color:green;
				position:absolute;
				top:80px;
				left:80px;
				z-index:7;
			}
			#xi{
				border:3px orange solid;
				background-color:orange;
				position:absolute;
				top:140px;
				left:140px;
				z-index:3;
			}
			#img1{
				width:400px;
				height:300px;
				
			}
			#img2{
				position:absolute;
				top:100px;
				left:200px;
			}
		</style>
	</head>
	<body>
		<div id="ha">哈哈哈哈</div>
		<div id="hi">嘿嘿嘿嘿</div>
		<div id="xi">嘻嘻嘻嘻</div>
		<img src="1.jpg" id="img1"/>
		<img src="2.gif" id="img2"/>
		
		
		
		
		
		
		
		
		
		
	</body>
</html>