认识css样式（relative和absolute相结合）

绝对定位与相对定位结合

qq_33151859

于 2016-10-04 14:06:12 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML基础编程题文章标签： html css 布局

本文链接：https://blog.youkuaiyun.com/qq_33151859/article/details/52733738

HTML基础编程题专栏收录该内容

32 篇文章

订阅专栏

本文通过一个具体的实例展示了如何将绝对定位与相对定位结合使用来实现特定的布局效果。在一个红色边框的div中，一张200x200像素的图片被设置为相对定位，而一段文字则采用绝对定位的方式放置于图片之上。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>absolute样式y与relative相结合</title>
<style type="text/css">
img{ width:200px;
	height:200px;}
div{ border:5px solid #F00;}
#box1{ 
		width:200px;
		height:200px;
		position:relative;
	}
#box2{ color:#0F0;s
		width:99%;
		height:50px;
		position:absolute;
		top:145px;
		left:-5px;		
		}

</style>
</head>
<body>
<div id="box1">
	<img src="../img/照片2.jpg" />
	<div id="box2">当我还是三年级的时候，我还是一个害羞的小女生</div>
</div>



</body>
</html>