问题见代码
HTML文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div>
<div class="fl logo">
<a href="index.html">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="fl">
<span class="title">慕课高铁服务中心 | </span><span class="subTitle">客户服务</span>
</div>
</div>
<ul class="fr nav">
<li>意见反馈 <a href="#">imooc@com</a> </li>
<li>您好，请 <span>登录 </span> | 注册 </li>
<li>我的IMOOC</li>
<li>手机版</li>
</ul>
</div>
</header>
<section class="main">
<div>您现在的位置： 客运首页 > 注册</div>
<div class="userInfo">
<div class="title">账户信息</div>
<div class="item">
<span class="important">*</span>
<label for="userAccount">用户名 :</label>
<input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
<span class="reminder">6-30位字母、数字或'_',字母开头</span>
</div>
<div class="item">
<span class="important">*</span>
<label for="password">登录密码 :</label>
<input type=" text" id="password" placeholder=" 6-20位字母,数字或符号">
<span class="reminder">
<i class="level1"></i>
<i class="level2"></i>
<i class="level3"></i>
</span>
</div>
<div class="item">
<span class="important">*</span>
<label for="confirmPwd">确认密码 :</label>
<input type="text" id="confirmPwd" placeholder=" 再次输入您的登录密码">
<span class="reminder pwdPic"></span>
</div>
<div class="item">
<span class="important">*</span>
<label for="name">姓名 :</label>
<input type="text" id="userName" placeholder=" 请输入姓名">
<span class="reminder nameRule"><u>姓名填写规则</u></span>
<div class="nameRuleContent">
<p> 1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p>
<p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉子的拼音或同音字重新修改后保存。</p>
<p>3.姓名中有繁体字无法输入时，可用简体替代。</p>
<p> 4.姓名较长，汉字与英文字符合计超过30个（1个汉子算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不去别大小写</p>
</div>
</div>
<div class="item">
<span class="important">*</span>
<label for="personId">证件类型 :</label>
<select name="personIdType" id="personId">
<option value="0">二代身份证</option>
<option value="1">护照</option>
</select>
<span class="reminder"></span>
</div>
<div class="item">
<span class="important">*</span>
<label for="idNo">证件号码 :</label>
<input type="text" id="idNo" placeholder=" 请输入您的证件号码">
<span class="reminder"></span>
</div>
<div class="item">
<span class="important">*</span>
<label for="email">邮箱 :</label>
<input type="text" id="email" placeholder=" 请正确填写邮箱地址">
<span class="reminder"></span>
</div>
<div class="item">
<span class="important">*</span>
<label for="phoneNo">手机号码 :</label>
<input type="text" id="phoneNo" placeholder=" 请输入您的手机号码">
<span class="reminder">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
</div>
<div class="item">
<span class="important">*</span>
<label for="passengerType">旅客类型 :</label>
<select name="personId" id="passengerType">
<option value="0">成人</option>
<option value="1">儿童</option>
</select>
<span class="reminder"></span>
</div>
<div class="contractor">
<input type="checkbox" id="choose">
<label for="choose">我已阅读并同意遵守规定</label>
</div>
<div class="submitBtn">
<button>下一步</button>
</div>
</div>
</section>
<footer>
<div>
<p>关于我们 | 声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 12003892号-11</p>
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>
CSS 文件如下：
/*All tag*/
*{
font-family: Microsoft YaHei;
font-size:14px;
margin:0;
padding: 0;
border:none;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
/*header*/
header{
position: relative;
height: 100px;
background:#ccc;
border-bottom:2px solid rgb(36,135,201);
line-height: 100px;
}
header .container{
margin:0 auto;
overflow: hidden;
width: 1200px;
height: 100px;
border: 1px solid black;
}
header .container .title
{
font-weight: bold;
font-size: 20px;
margin-left: 10px;
}
header .container .subTitle
{
/* font-weight: bold; */
/* font-size: 16px; */
/* font:grey; */
}
.logo img{
display:block;
height: 100px;
width: 100px;
}
.container .nav li{
display: inline-block;
float: left;
padding-right: 20px;
}
/*main*/
.main{
position: relative;
width:1200px;
height: 800px;
border:1px solid red;
margin: 0 auto;
}
.userInfo
{
width: 100%;
margin:50px auto;
border-radius:10px;
border: 1px solid rgb(251,116,3);
min-height: 700px;
}
.userInfo .title
{
background:rgb(251,116,3);
color:white;
width: 100%;
height: 50px;
line-height: 50px;
font-size:16px;
border-top-left-radius: 10px;/*??问题一：如果没设置这个，左上角右上角是尖的，不知道这样子设置对吗？感觉左上角跟右上角还是有点怪？*/
border-top-right-radius: 10px;
}
.userInfo .item
{
position: relative;
width: 80%;
margin:20px auto;
height: 25px;
line-height: 25px;
z-index: 2;
}
.userInfo .item .important, .userInfo .item .reminder
{
color: rgb(251,116,3);
}
.userInfo .item label
{
display: inline-block;
width:10%;
font-weight: bold;
/* text-align: center; */
/*问题二：这边要使label里的文字类似示例图那样，而不是像目前往左靠齐，要怎么控制？是自己在HTML那边写 控制的吗？用text-align:center也不能实现类似示图那样，会使整个居中。*/
}
.userInfo .item input,.userInfo .item select
{
width: 40%;
border:1px solid rgba(0,0,0,0.2);
}
.userInfo .item .reminder i{
display: inline-block;
width: 40px;
height: 7px;
background: #ddd;
margin: 5px 5px;
}
.userInfo .item .nameRule :hover
{
cursor: pointer;
/* display: block; */
}
.nameRule:hover+.nameRuleContent
{
display: block;/*问题三：为啥这边hover时，要把隐藏的那个姓名规则方框显示出来却不能显示出来*/
}
.userInfo .item .nameRuleContent
{
border: 1px solid rgb(36,135,201);
width:400px;
z-index: 11;/*问题四：为啥这边设置的z-index不生效：还是不能将父元素的内容覆盖掉？*/
position: absolute;
top:20px;
left: 586px;
display: none;/*把姓名规则方框隐藏起来*/
}
.userInfo .contractor
{
margin-left: 20%;
margin-top:20px;
}
.userInfo .submitBtn
{
width: 50%;
margin:20px auto;
}
.userInfo .submitBtn button
{
width: 200px;
height: 30px;
background:rgb(251,116,3);
border-radius: 10px;
color:white;
}
/*footer*/
footer{
border-top:2px solid rgb(36,135,201);
position: relative;
background:#ccc;
height: 80px;
text-align: center;
line-height: 40px;
}
请见CSS文件中在相应位置注释起来的问题：问题一，问题二，问题三，问题四总共4个问题哈。。还请帮忙解答一下，谢谢
正在回答
同学你好！
针对同学代码中的问题依次解释如下：
1.这样实现是可以的。同学觉得奇怪是因为userInfo的边框重叠了导致。可以给出了title之外的div再在外嵌套一层div，给这个div设置边框：
或者这样也是可以的。
2.想要实现如图例，可以使用 ；，也可以如下：
通过使用text-align-last属性实现两端对齐
效果：
3.是层级不够，被覆盖。可以添加父级类名提高一定层级：
效果：
4.同学说的覆盖不了是这个意思吗？
这个层级是由于父级的层级导致，如下：
效果：
如果帮助到了你，欢迎采纳，祝学习愉快~
同学你好！
同学的理解是有一些问题的。关于覆盖问题，1.需要先去掉父级的层级
2.还需要添加这个框的背景颜色
因为div本身没有背景颜色，所以这里即使是层级高了，也不会有覆盖的效果
关于层级问题。它们的父级都是item，层级都是2，这时候就不会考虑子元素的层级了，所以前面的会被后面的所覆盖，同学可以再复习下关于这节课的教辅：http://file.mukewang.com/class/assist/190/3661251/z-inde%28%E6%95%99%E8%BE%85%29x.pdf 中的8.从父规则
如果帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星