老师又有问题了!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
border:none;
}
body{
font-family:微软雅黑;
font-size:12px;
}
a{
text-decoration: none;
}
a:link{
color:black;
}
/*top部css*/
.main{
margin: 0 auto;
width:100%;
height:auto;
}
.head{
background:#f3f5f7;
width:100%;
}
.top{
width: 1200px;
height:auto;
margin:0 auto;
border-bottom: 1px solid gray;
line-height: 40px;
}
/*top栏左边登录部分*/
.top .login{
color: red;
}
.top a{
margin-left:10px;
}
.top a:hover{
color:red;
}
/*top栏右边导航栏部分*/
.ftopright{
display: inline-block;
float: right;
}
.ftopright>div{;
float: left;
width:100px;
position: relative;
z-index:2;
}
.ftopright>div>div{
width:100px;
display:none;
position: absolute;
z-index: 2;
}
.ftopright>div>div>p{
padding-left: 10px;
}
.toprightblock{
position: absolute;
}
/*logo区css*/
/*左边logo部分*/
.navs{
width:1200px;
height:125px;
margin:0 auto;
position: relative;
}
.navsimg{
background: url(素材/logo.png) no-repeat;
position: absolute;
width:136px;
height:48px;
top:50%;
margin:-24px 0 0 10px;
}
/*中间搜索框部分*/
.input{
position: absolute;
display: block;
height:40px;
width:600px;
top: 50%;
left:50%;
margin:-20px 0 0 -300px;
}
input{
height:38px;
width: 600px;
display: block;
border:1px solid black;
}
button{
width:70px;
height:40px;
background: black;
color: #fff;
position: absolute;
top: 50%;
left:50%;
margin:-20px 0 0 300px;
}
/*右边购物车部分*/
.shopping{
width:160px;
height:40px;
background-color: #e00;
position: absolute;
top: 50%;
right:2%;
margin-top: -20px;
}
.shopimg{
width: 16px;
height: 16px;
background: url(素材/icon/26.png) no-repeat;
position: absolute;
top:50%;
left:10%;
margin-top:-8px;
}
.shoptext{
width: 120px;
height:40px;
line-height: 40px;
position: absolute;
text-align: center;
right:10px;
color: #fff;
cursor: pointer;
}
.shoptext div{
background: url(素材/icon/23.png);
width: 16px;
height: 16px;
position: absolute;
top: 50%;
right:10px;
margin-top: -8px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.ftopright>.toprightblock').hover(function(){
$(this).css({
'border':'1px solid gray',
'background':'#fff'
});
$(this).find('div').css('display','block');
//$(this).find('img')attr('src','素材/icon/24.png');为什么我用这个无法替换小箭头的图片呢？
},function(){
$(this).css({
'border':'none',
'background':'#f3f5f7'
});
$(this).find('div').css('display','none');
});
$('.ftopright>div>div>p').hover(function(){
$(this).css('background','#cdd0d4');
},function(){
$(this).css('background','#fff');
})
});
</script>
</head>
<body>
<div class='main'>
<div class='head'>
<div class='top'>
<!-- 顶部登陆区域 -->
<a href="#" class='login'>亲，请登录</a><a href="#">免费注册</a><a href="#">手机逛慕淘</a>
<!-- 顶部导航区域 -->
<div class='ftopright'>
<div class="toprightblock">
<a class='topright'>我的慕淘</a>
<img src="素材/icon/22.png">
<div>
<p>已买到的宝贝</p>
<p>我的足迹</p>
</div>
</div>
<div class="toprightblock">
<a class='topright'>收藏夹</a>
<img src="素材/icon/22.png">
<div>
<p>收藏的宝贝</p>
<p>收藏的店铺</p>
</div>
</div>
<div>
<a class='topright'>商品分类</a>
</div>
<div class="toprightblock">
<a class='topright'>卖家中心</a>
<img src="素材/icon/22.png">
<div>
<p>免费开店</p>
<p>已买出的宝贝</p>
<p>出售中的宝贝</p>
<p>卖家服务市场</p>
<p>卖家培训中心</p>
<p>体验中心</p>
</div>
</div>
<div class="toprightblock">
<a class='topright'>联系客服</a>
<img src="素材/icon/22.png">
<div>
<p>消费者客服</p>
<p>卖家客服</p>
</div>
</div>
</div>
</div>
<!-- logo区 -->
<div class='navs'>
<div class='navsimg'></div>
<div class='input'>
<input type="text" value="灵魂美食一元抢" >
<button>搜索</button>
</div>
<div class="shopping">
<div class="shopimg"></div>
<div class="shoptext">
<span>购物车 | 0</span>
<div></div>
</div>
</div>
</div>
</div>
<div class='banner'></div>
<div class='middle'></div>
<div class='flink'></div>
<div class='foot'></div>
</div>
</body>
</html>加了logo部分后我顶部导航栏的下拉菜单就会出现问题，我在想是不是因为logo区使用了定位而顶部没用定位的问题，所以我就给顶部也加了几个定位，但现在效果还是不理想。移动到导航栏上展开的部分仍然是没有边框的，可能是因为展开部分用的是absolute，上面用的是relative，我就想把上面也改成absolute,改了之后就GG了= =，还有啊老师，我总觉得我定位学的很差，麻烦老师帮我找找问题，谢谢老师!!!!!!!!!!
0
收起
正在回答
3回答
同学，你好。要想熟练的使用absolute和relative，首先我们需要深入的了解它们的用法。
absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由trbl决定。
一般来讲，网页居中的话用absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。
relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以body的原始点为原始点，配合table进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星