4-2案列关于position问题
来源：4-2 侧边栏导航跟随案例
慕粉13146735245
2017-04-29 18:53:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.yizhu{
width: 800px;
height: auto;
}
.yi{
width: 80px;
height: auto;
line-height: 20px;
text-align: center;
color:#fff;
border-bottom: 1px solid gray;
position: fixed;
left: 0;
top: 50%;
margin-bottom: -10px;
background: #333;
cursor: pointer;
}
.er-zhu{
display: none;
}
.yi:hover .er-zhu{
width: 80px;
height: auto;
display: block;
}
.er{
width: 80px;
height: auto;
background: #fff;
color: #333;
border-bottom: 1px solid gray;
text-align: center;
}
.san-zhu{
width: 80px;
height: auto;
display: none;
}
.er:hover .san-zhu{display: block;}
.san{
width: 80px;
height: auto;
color: #fff;
background: #333;
border-bottom: 1px solid gray;
text-align: center;
position: relative;
left: 80px;
top: 0;
}
</style>
</head>
<body>
<div class="yi-zhu">
<div class="yi">一级标题
<div class="er-zhu">
<div class="er">二级标题
<div class="san-zhu">
<div class="san">三级标题</div>
<div class="san">三级标题</div>
</div>
</div>
<div class="er">二级标题
<div class="san-zhu">
<div class="san">三级标题</div>
<div class="san">三级标题</div>
</div>
</div>
<div class="er">二级标题
<div class="san-zhu">
<div class="san">三级标题</div>
<div class="san">三级标题</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
根据该节案例，.san中的position:absolute绝对路径和.san-zhu中的position:relative相对路径共存时，三级标题显示为一行（按道理说应该是两行），而且现实效果在二级标题下空一行（与讲习不大一样），在我将.san-zhu中的position:relative相对路径删除时，三级标题是两行显示，但二级标题下依旧空两行（此问题是什么原因，或者说怎么解决），请老师点评解惑，谢谢！
2回答
-
你好，根据代码分析，是否要实现如下的效果，鼠标经过一级菜单出现二级菜单，经过二级菜单，出现三级菜单：
如是，代码中的 position 定位问题。
.san-zhu { width: 80px; height: auto; position: relative; /* 父元素设置 relative*/ display: none; } .san { width: 80px; height: 20px; color: #fff; background: #333; border-bottom: 1px solid gray; text-align: center; position: absolute; /* 子元素设置absolute，就会相对与父元素进行定位*/ left: 80px; top: -20px; } .er:hover .san-zhu { display: block; }希望对你有帮助，祝学习愉快。
0 -
慕粉13146735245
提问者
2017-04-30
关于任何子元素相对于父元素的定位，都是严格执行relative（父），absolute（子），这种定位结构吗，除此之外还有没有其他position定位属性组合？如，inherit属性 ，给父元素relative，子元素为inherit，能不能相对定位（如果方便的话，您是否可以用最简单的解释帮我解惑一下inherit的具体用法及效果）
0
相似问题
回答 1
回答 2
回答 2
回答 4
回答 1