div 的重叠布局

最新推荐文章于 2024-05-15 00:52:17 发布

Wake_me_Up123

最新推荐文章于 2024-05-15 00:52:17 发布

阅读量1.9k

点赞数

分类专栏： html 文章标签：布局

本文链接：https://blog.csdn.net/Wake_me_Up123/article/details/53787294

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

想要容器的位置重叠，需要为 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）。效果图如下：
这里写图片描述

Wake_me_Up123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 的重叠布局

想要容器的位置重叠，需要为 div 设置属性。<html><head> <style> #title {position:relative} #logo {position:absolute; top:20px; left:150px} #blackBar {background-color:#363636; color:#DCDCDC; f
复制链接

扫一扫