CSS设置组件的位置

最新推荐文章于 2024-08-06 10:00:00 发布

manREDoo

最新推荐文章于 2024-08-06 10:00:00 发布

阅读量5.9k

点赞数

文章标签： CSS 组件定位

本文链接：https://blog.csdn.net/manREDoo/article/details/73997051

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

组件的排列方式

Position: absoult绝对寻址/relative相对寻址

Width、 height: 指定组件的宽度和长度

Left、top：指定组件与边界的距离

Overflow: 设置超出边边界的显示方式

Visible: 不管组件的长度，内容完全显示

Hidden: 超出长宽的内容不显示

Scroll：无论内容会不会超出长宽，都加入滚动条

Auto: 根据情况决定是否显示滚动条

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>组件定位</title>
	<style type="text/css" media="screen">
		#1{
			position: absolute;
			z-index: 1;
			top: 20px; 
			left: 30px;
			font-size: 24px;
			font-family: 楷体;
			color: #FFFFFF;
		}
		#2{
			position: absolute;
			z-index: 2;
			width: 200px;
			top: 110px; 
			left: 100px;
			font-size: 12px;
			font-family: 楷体;
		}
	</style>
</head>
<body>
	<div id="1" ><img src="photo.jpg" width="200 " height="210" border="0">
		
	</div>
	<div id="2">
		111111111111111111111111111111111
	</div>
</body>
</html>