下面的div覆盖上面的div小例子

最新推荐文章于 2022-10-13 10:05:10 发布

最新推荐文章于 2022-10-13 10:05:10 发布 · 765 阅读

文章标签：

#html

本文通过一个简单的HTML页面示例，展示了如何使用相对定位使一个div元素覆盖在另一个div元素之上，以此来实现特定的布局效果。

<!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>无标题文档</title>
</head>

<body>
<div style="width:800px;height:600px;border:1px solid black">
<div style="width:800px;height:100px;border:1px solid black"><h1>这是上面的div</h1></div>
<div style="background-image:url(https://www.google.com.hk/images/srpr/logo11w.png);position:relative;top:-90px;left:0;width:800px;height:100px;border:1px solid black"></div>
</div>
</body>
</html>