老师我菜单栏定位好之后，设置margin发现定位位置有点不对。照说橙色盒子应该在右下角显示呀！
来源：2-7 使用CSS制作菜单
Vigorous阿炎
2020-10-23 18:41:55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕云游</title>
<meta name="keywords" content="旅游，机票，观光，休闲">
<meta name="Description" content="旅游好地方，给你身心放个假，
机票，度假，观光，休闲旅游必去的地方">
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/base.css">
<link rel="stylesheet" href="CSS/css.css">
</head>
<body>
<head>
<header class="header-top site-head">
<!-- 整个页面区域 -->
<div class="A topbar">
<!-- 中间上半部分区域，还有下半部分所以需要分区 -->
<div class="center-wrap">
<!-- 正式编辑区 -->
<div class="A1">
<ul>
<li>
<a href="">目的地</a>
</li>
<li>
<a href="">锦囊</a>
</li>
<li class="a1">
<a href="">社区</a>
<div class="B">
<em class="aa1"></em>
<em class="aa2"></em>
</div>
<div class="menu">
<ul>
<li><a>旅行论坛</a></li>
<li><a>旅行专栏</a></li>
<li><a>旅行问答</a></li>
<li><a>旅行生活分享平台</a></li>
<li><a>JNE旅行生活美学</a></li>
<li><a>Biu伴（原结伴同游）</a></li>
<li><a>负责任的旅行</a></li>
<li><a>特别策划</a></li>
</ul>
</div>
<li>
<a href="">行程助手</a>
</li>
<li class="a1">
<a href="">商城</a>
<div class="B">
<em class="aa1"></em>
<em class="aa2"></em>
</div>
<div class="menu">
<ul>
<li><a>旅行论坛</a></li>
<li><a>旅行专栏</a></li>
<li><a>旅行问答</a></li>
<li><a>旅行生活分享平台</a></li>
<li><a>JNE旅行生活美学</a></li>
<li><a>Biu伴（原结伴同游）</a></li>
<li><a>负责任的旅行</a></li>
<li><a>特别策划</a></li>
</ul>
</div>
</li>
<li class="a1">
<a href="">酒店民宿</a>
<div class="B">
<em class="aa1"></em>
<em class="aa2"></em>
</div>
</li>
<li>
<a href="">特价酒店</a>
</li>
</ul>
</div>
<div class="right">
<a class="iconfont dr" href="">登入</a>
<a class="iconfont zc" href="">注册</a>
<a class="iconfont" href=""></a>
<a class="iconfont" href=""></a>
<a class="iconfont" href=""></a>
<span class="iconfont">|</span>
<a class="iconfont" href=""></a>
</div>
</div>
</div>
<div class="main-nav">
<div class="center-wrap">
<div>
<ul>
<li class="b">
<a href="">机酒自由行</a>
<p class="b1"></p>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="b">
<a href="">跟团游</a>
<p class="b1"></p>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="b">
<a href="">当地玩乐</a>
<p class="b1"></p>
</li>
<li>
<a href="">签证</a>
</li>
<li>
<a href="">游轮</a>
</li>
<li>
<a href="">河轮</a>
</li>
<li>
<a href="">保险</a>
</li>
<li>
<a href="">租车自驾</a>
</li>
<li class="b">
<a href="">深度旅游</a>
<p class="b1"></p>
</li>
<li>
<a href="">私人订制</a>
</li>
</ul>
</div>
</div>
</div>
<div class="log-area">
<div class="center-wrap">
<h1>暮云商城</h1>
<input type="text" placeholder="慕云游、酒店、机票、民宿">
<a class="iconfont" href=""></a>
</div>
</div>
</header>
</head>
</body>
</html>
css
.header-top{
height: 150px;
background-color: rgb(228, 187, 187);
}
.A{
height: 32px;
background-color: #2A2A2A ;
line-height: 32px;
}
.header-top .A .center-wrap{
}
.header-top .A .center-wrap .right .iconfont{
float: right;
margin-right: 16px;
line-height: 32px;
}
.header-top .A .center-wrap .right .iconfont:first-child{
margin-right: 0;
}
.header-top .A .center-wrap .right .dr,.zc{
font-size: 12px;
color: #FFFFFF;
text-align: justify;
line-height: 32px;
}
.header-top .A .center-wrap .A1{
float: left;
}
.header-top .A .center-wrap .A1> ul> li{
/* 大于号表示父亲的第一任儿子 */
font-size: 14px;
float: left;
margin-right: 18px;
}
.header-top a{
font-family: PingFangSC-Regular;
color: #FFFFFF;
text-align: justify;
line-height: 18px;
}
.header-top .A .center-wrap .A1> ul> li.a1{
/* li里面本身的一个a1元素用交集 */
padding-right:12px;
position: relative;
}
.header-top .A .center-wrap .A1>ul>li.a1 .menu{
/* 为什么我的盒子没显示出来，难道是溢出隐藏掉了 */
position: absolute;
bottom:-300px;
right: 0;
width: 121px;
background-color: rgb(138, 230, 102);
/* display: none; */
z-index: 9999;
}
.header-top .A .center-wrap .A1>ul>li:hover .menu{
display: block;
}
.header-top .A .center-wrap .A1> ul> li.a1 .B{
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
width: 12px;
height: 12px;
transition: transform 0.2s linear 0s;
}
.header-top .A .center-wrap .A1> ul> li.a1:hover .B{
transform:rotate(180deg)
}
/* 先两个盒子使用绝对定位然后微调，然后大盒子hover，
之后控制大盒子transition旋转速度 */
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa1{
position: absolute;
left: 2px;
top: 4px;
width: 6px;
height: 6px;
background-color: rgb(248, 248, 246);
transform: rotate(45deg);
}
.header-top .A .center-wrap .A1> ul> li.a1 .B .aa2{
position: absolute;
top: 2px;
left: 2px;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
.main-nav{
background-color: #20BD9A;
height: 40px;
}
.main-nav .center-wrap ul li{
float: left;
margin-right: 18px;
line-height: 40px;
font-size: 16px;
position: relative;
}
.main-nav .center-wrap ul li{
padding-right: 16px;
}
.main-nav .center-wrap ul li .b1{
position: absolute;
right: 0;
top: 50%;
margin-top: 0px;
/* transparent透明色 */
border: 8px solid transparent;
border-top-color:white;
border-bottom: none;
transition: transform 0.2s linear 0s;
}
.main-nav .center-wrap ul li:hover .b1{
transform: rotate(180deg);
}
.log-area{
height: 78px;
background-color: #fff;
}
.log-area h1{
float: left;
font-size: 24px;
color: #20BD9A;
text-align: justify;
line-height: 78px;
margin-right: 20px;
}
.log-area input{
float: left;
width: 373px;
height: 30px;
opacity: 0.3;
border: 1px solid #20BD9A;
border-radius: 8px 0 0 8px;
margin-top: 24px;
/* 取消默认的外线（外线是文本框特有的东西） */
outline: none;
}
.log-area .iconfont{
float: left;
margin-top: 24px;
width: 32px;
height: 30px;
background-color: #20BD9A;
border-radius: 0 4px 4px 0;
font-size: 20px;
text-align: center;
line-height: 30px;
}
在这里输入代码，可通过选择【代码语言】突出显示
2回答
-
同学你好，如果menu的top值设置为30左右，不给menu设置margin-top值，效果也可以实现，祝学习愉快~
0 -
好帮手慕言
2020-10-23
同学你好，使用同学提供的代码测试，效果如下：
效果图中没有橙色盒子，同学说的是下图绿色的盒子吗？如果是的话，解答如下：
类名为a1的元素设置了定位，类名为menu的元素是相对于a1定位的，如果menu的bottom属性设置为0，menu的底部会在a1的底部显示，因为a1已经在页面的最上方了，menu的高度比a1的大，所以menu会被覆盖一部分。效果如下：
建议：可以把bottom值设置为负值，也可以把right和bottom值替换为left和top值，例如：
0h020-10-23
相似问题