html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>定位</title> <link rel="stylesheet" style="text/css" href="css/mr-style.css"> </head> <body> <div class="mr-border"> <div class="mr-box"> <div class="mr-shop"> <ul> <li> 女装 /内衣 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>男装 /运动户外 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/3.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>女鞋 /男鞋 /箱包 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/4.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </li> <li>化妆品 /个人护理 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>腕表 /珠宝饰品 /眼镜 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/3.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>手机 /数码 /电脑办公 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/4.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </li> <li>母婴玩具 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>零食 /进口食品 /茶酒 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/3.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>生鲜水果 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/4.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </li> <li>大家电 /生活电器 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>家具建材 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/3.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>汽车 /配件 /用品 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/4.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </li> <li> 家纺 /家饰 / <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li>医药保健 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/3.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> <li> 厨具 /收纳 /宠物 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/4.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </li> <li>图书音像 <div class="mr-shop-items"> <div class="mr-item"> <img src="images1/2.jpg"> <p>【黑色上市】Huawei/华为 Mate 9 32/64GB4G智能手机限量抢</p> <p>华为官方旗舰店</p> </div> </div> </li> </ul> </div> </div> </div> </body> </html>
css代码为：
.mr-box {
width: 969px;
height: 560px;
margin: 0 auto;
border: 2px solid red;
background-image: url(../images1/1.jpg);
background-repeat: no-repeat;
background-size: 90% 100%;
background-position: 200px 0;
}
.mr-shop {
width: 201px;
height: 496px;
margin-top: -16px;
background: #ccc;
}
ul {
margin-left: -40px;
}
.mr-shop li:hover {
background: #D8CACA;
}
li {
list-style: none;
width: 202px;
height: 35px;
text-align: center;
background: #ddd;
line-height: 35px;
font-weight: bolder;
font-size: 18px;
position: relative;
}
.mr-shop li .mr-shop-items {
width: 764px;
height: 420px;
background:#eee;
position: relative;
left: 202px;
top: -31px;
display: none;
}
.mr-shop li:hover .mr-shop-items {
display: block;
}
.mr-item {
padding-top: 50px;
}问题：
如何实现相对定位，经过文字立显内容的？
top: -31px;这个地方对吗？这样的话图片不是越来越向上了吗？
但是怎么显示的时候这一排按钮点击时图片怎么越来越向下了？
你观察得很仔细！这里确实有视觉上的"矛盾"，让我详细解释一下这个现象：
关键代码分析：
.mr-shop li .mr-shop-items {
position: relative; /* 相对定位 */
left: 202px; /* 向右移动202px */
top: -31px; /* 向上移动31px */
display: none; /* 默认隐藏 */
}为什么 top: -31px 却让图片看起来"向下"？
1. 相对定位的原理
position: relative的元素相对于自身原本位置进行移动元素的布局空间仍然保留在原始位置
移动后的元素会覆盖在其他元素上方
2. HTML结构分析
<li> 文字内容（菜单项） <div class="mr-shop-items"> <!-- 这是弹出的内容 --> <div class="mr-item"> <img src="..."> <p>...</p> </div> </div> </li>
3. 实际的视觉流程：
初始位置（隐藏时）： ┌─────────────────────┐ │ 菜单项文字（可见） │ ← li的高度35px │ │ │ [隐藏的弹出层] │ ← .mr-shop-items 的原始位置 └─────────────────────┘ 鼠标悬停时： ┌─────────────────────┐ │ 菜单项文字（背景变色）│ ← li的高度35px │ │ │ │ ← .mr-shop-items 的原始位置（已向上移动） └─────────────────────┘ ↓ ┌─────────────────────┐ │ [弹出层显示在这里] │ ← 由于top:-31px，向上移动 │ │ 实际覆盖在li的上方区域 │ 内容区域 │ │ │ │ │ └─────────────────────┘
4. 为什么感觉"向下"？
.mr-shop-items的原始位置在菜单文字下方top: -31px让它向上移动31px移动后，弹出层部分覆盖了菜单项的位置
但因为弹出层高度很大（420px），大部分内容显示在菜单项下方
所以视觉上感觉内容"向下弹出"
举个例子说明：
假设第一个菜单项"女装/内衣"：
为什么这样设计？
无缝连接：让弹出层紧贴菜单项，没有间隙
视觉连续性：弹出层看起来是从菜单"展开"出来的
覆盖效果：弹出层可以覆盖下方的菜单项，形成层级感
验证方法：
你可以临时修改CSS来观察效果：
.mr-shop li .mr-shop-items {
top: -31px; /* 改为0看看效果 */
border: 2px solid red; /* 添加边框看看实际位置 */
}改为 top: 0 后，你会看到弹出层确实向下移动了，与菜单项之间出现了间隙。
总结：
top: -31px 确实是向上移动，但因为：
弹出层原始位置在菜单项下方
弹出层高度很大（420px）
向上移动后，大部分内容仍然显示在下方
给人视觉上的"向下弹出"错觉
这是一种常见的设计技巧，用来创建无缝的下拉菜单效果！
.mr-shop li:hover .mr-shop-items { display: block; }啥意思
这段CSS代码的意思是：
语法解析：
.mr-shop li:hover .mr-shop-items {
display: block;
}拆解：
.mr-shop li:hover- 选择鼠标悬停在.mr-shop内的<li>元素上时.mr-shop-items- 选择该<li>内部的.mr-shop-items元素display: block;- 将其显示方式设置为块级元素（显示出来）
实际效果：
<div class="mr-shop"> <ul> <li>菜单项1 <div class="mr-shop-items"> <!-- 默认隐藏 --> 弹出内容 </div> </li> <li>菜单项2 <div class="mr-shop-items"> <!-- 默认隐藏 --> 弹出内容 </div> </li> </ul> </div>
工作流程：
初始状态（默认）：
.mr-shop li .mr-shop-items {
display: none; /* 隐藏弹出层 */
}所有
.mr-shop-items都是隐藏的
鼠标悬停时：
/* 当鼠标悬停在某个li上时，显示它的弹出层 */
.mr-shop li:hover .mr-shop-items {
display: block; /* 显示该li下的弹出层 */
}具体示例：
假设有以下结构：
<div class="mr-shop"> <ul> <li>女装 /内衣 <div class="mr-shop-items"> <!-- 这个默认隐藏 --> <img src="..."> <p>商品描述</p> </div> </li> <li>男装 /运动户外 <div class="mr-shop-items"> <!-- 这个默认隐藏 --> <img src="..."> <p>商品描述</p> </div> </li> </ul> </div>
交互过程：
页面加载时：两个图片框都隐藏（
display: none）鼠标悬停在"女装/内衣"上：
触发
.mr-shop li:hover找到这个li里的
.mr-shop-items设置
display: block（显示女装的图片框）男装的图片框仍然隐藏
鼠标悬停在"男装/运动户外"上：
显示男装的图片框
女装的图片框自动隐藏
完整效果配合：
/* 1. 默认隐藏所有弹出层 */
.mr-shop li .mr-shop-items {
display: none;
/* 其他定位样式 */
position: relative;
left: 202px;
top: -31px;
width: 764px;
height: 420px;
}
/* 2. 鼠标悬停时显示对应的弹出层 */
.mr-shop li:hover .mr-shop-items {
display: block; /* 显示出来 */
}
/* 3. 鼠标悬停时菜单项变色 */
.mr-shop li:hover {
background: #D8CACA; /* 背景色变化 */
}这种技术叫做"CSS下拉菜单"或"悬停弹出层"
优点：
纯CSS实现，无需JavaScript
性能好，响应快
代码简洁
特点：
只有鼠标悬停的当前项会显示弹出层
鼠标移开自动隐藏
多个菜单项互不影响
这就是典型的电商网站左侧分类导航效果！