div 的重叠布局

来源：互联网发布：广东铁通网络传真编辑：程序博客网时间：2024/05/16 15:48

想要容器的位置重叠，需要为 div 设置属性。

<html><head>    <style>        #title {position:relative}        #logo {position:absolute; top:20px; left:150px}        #blackBar {background-color:#363636; color:#DCDCDC; font-size:13px; height:26px; line-height:26px}        #name {display:inline; margin:0 300px}        #welcome {display:inline; margin:0 100px}        #welcome a{color:#C0C0C0}        #welcome a:hover{text-decoration:none; color:#D0770B; font-weight:bold}        .navigation {height:35px; line-height:40px; background-color:#184785; margin:0 auto; padding-left:280px;z-index:9999}        .menu li{color:white; width:70px; height:40px; display:inline-block; line-height:40px; font-size:18px; font-weight:bold}        .menu li a {display:inline-block; color:white;    width:100%; text-align:center}        .menu li a:hover {background-color:#426EB4; color:white;font-size:22px; text-align:center; text-decoration:none; display:inline-block}        .menu li a:active {background:#426EB4;text-align:center;display:inline-block;width:100%}        #greyBar {height:55px; background-color:#ECECEC}    </style></head><body>    <div id="title">        <div id="blackBar">            <div id="name">                安徽无人机网综合门户网站 www.zawrj.com            </div>            <div id="welcome">                您好，请<a href=""> 登录 </a>或<a href=""> 注册 </a>            </div>        </div>        <div class="navigation">                    <ul class="menu">                        <li><a href="" class="active">热点</a><div></div></li>                        <li><a href="">行业</a><div></div></li>                        <li><a href="">法规</a><div></div></li>                        <li><a href="">机库</a><div></div></li>                        <li><a href="">测评</a><div></div></li>                        <li><a href="">技巧</a><div></div></li>                        <li><a href="">作品</a><div></div></li>                        <li><a href="">赛事</a><div></div></li>                        <li><a href="">约飞</a><div></div></li>                    </ul>        </div>        <div id="greyBar">    </div>              </div>        <div id="logo"><img src="logo.png" /></div></body></html>

备注：页面上分为两个大的 div （title 和 logo），设置 div 为 title 的属性 position:relative;（相对定位），名字 logo 的 div 设置属性 position:absolute; top:20px; left:30px;（绝对定位，并设置高20px，左30px）。效果图如下：
这里写图片描述

0 0