老师又有问题了!

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

<!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了= =，还有啊老师，我总觉得我定位学的很差，麻烦老师帮我找找问题，谢谢老师!!!!!!!!!!

CC陈十一 2019-03-23

源自：项目：JQ实现瀑布流 5-2 作业题

收起

3回答

Steve007 回答被采纳获得+3积分 2019-03-24 16:11:24

同学，你好。要想熟练的使用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来设定上下关系的，一定是子级在上父级在下。

祝学习愉快！

收起回答