css - z-index 不适用于 li 伪元素

Question

grrrrrrr，我已经为此苦苦挣扎了一段时间。我尝试创建一个带有连接器的进度条，我希望连接器位于我拥有的圆圈下，当圆圈与类 active 连接器显示时，我想避免它。看看我的 fiddle 。

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);


body {
font-family: montserrat, arial, verdana;
margin:0;
padding:0;
background-image:url("Capture.PNG"); 
}

.modal{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); 
}

.modal-content{
background-color: #fefefe;
margin: 8% auto;
border: 1px solid #888;
width: 662px;
height: 662px;
}

.modal-header{
height:100px;
}

.right-header{
float:right;
width:50%;
}

#msform .formPage {
height: 662px;
padding: 35px;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
/*Hide all except first fieldset*/
#msform  > .formPage ~ .formPage{
display: none;
}

/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
} 
/*progressbar*/
#progressbar {
/*CSS counters to number the steps*/
counter-reset: step;
}

/*This is the li circle*/
#progressbar li {
counter-increment: step;
width: 27px;
height: 27px;
background-color:#dcdedf;
margin-left: 35px;
border-radius: 50%;
list-style-type: none;
float: left;
}

/*Display the li number*/
#progressbar li:before {
content: counter(step);
text-align: center;
line-height: 26px;
display: block;
color:white;
}

/*progressbar connectors*/
#progressbar li:after {
content: "";
width: 38px;
height: 10px;
background-color: #dcdedf;
position: relative;
top: -18px;
left: -36px;
display: block;
z-index: -1;
}

#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active,  #progressbar li.active:after{
	background: #3395ff;
	color: white;
}

#progressbar li:first-child{
	margin-left:0;
}

.close {
	color: #aaa;
	float: right;
	font-size: 24px;
	padding: 5px 15px;
}

.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

   <div class="modal">
	<div class='modal-content'>
		<div class='modal-header'>
			<span class="close" data-action="close-modal">x</span>
			<div class="left-header">
				<span>Add new App</span>
				<span></span>
			</div>

			<div class="right-header">
				<!-- progressbar -->
				<ul id="progressbar">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<hr/>
		<div class="modal-inner-content">
			<form id="msform">
				<div class="formPage">
					<h2 class="fs-title">Create your account</h2>
					<h3 class="fs-subtitle">This is step 1</h3>
					<input type="text" name="email" placeholder="Email" />
					<input type="password" name="pass" placeholder="Password" />
					<input type="password" name="cpass" placeholder="Confirm Password" />
					<input type="button" name="next" class="next action-button" value="Next" />
				</div>
				<div class="formPage">
					<h2 class="fs-title">Social Profiles</h2>
					<h3 class="fs-subtitle">Your presence on the social network</h3>
					<input type="text" name="twitter" placeholder="Twitter" />
					<input type="text" name="facebook" placeholder="Facebook" />
					<input type="text" name="gplus" placeholder="Google Plus" />
					<input type="button" name="previous" class="previous action-button" value="Previous" />
					<input type="button" name="next" class="next action-button" value="Next" />
				</div>
				<div class="formPage">
					<h2 class="fs-title">Personal Details</h2>
					<h3 class="fs-subtitle">We will never sell it</h3>
					<input type="text" name="fname" placeholder="First Name" />
					<input type="text" name="lname" placeholder="Last Name" />
					<input type="text" name="phone" placeholder="Phone" />
					<textarea name="address" placeholder="Address"></textarea>
					<input type="button" name="previous" class="previous action-button" value="Previous" />
					<input type="submit" name="submit" class="submit action-button" value="Submit" />
				</div>
				<div class="formPage">
					<h2 class="fs-title">Social Profiles</h2>
					<h3 class="fs-subtitle">Your presence on the social network</h3>
					<input type="text" name="twitter" placeholder="Twitter" />
					<input type="text" name="facebook" placeholder="Facebook" />
					<input type="text" name="gplus" placeholder="Google Plus" />
					<input type="button" name="previous" class="previous action-button" value="Previous" />
					<input type="button" name="next" class="next action-button" value="Next" />
				</div>
				<div class="formPage">
					<h2 class="fs-title">Social Profiles</h2>
					<h3 class="fs-subtitle">Your presence on the social network</h3>
					<input type="text" name="twitter" placeholder="Twitter" />
					<input type="text" name="facebook" placeholder="Facebook" />
					<input type="text" name="gplus" placeholder="Google Plus" />
					<input type="button" name="previous" class="previous action-button" value="Previous" />
					<input type="button" name="next" class="next action-button" value="Next" />
				</div>

			</form>
		</div>
	</div>
</div>

Answer 1

您需要设置直接父级的 z-index 即 #progressbar 以将其提升到其他祖先之上。

#progressbar {
  position: relative;
  z-index: 1;
}

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
  font-family: montserrat, arial, verdana;
  margin: 0;
  padding: 0;
  background-image: url("Capture.PNG");
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 8% auto;
  border: 1px solid #888;
  width: 662px;
  height: 662px;
}

.modal-header {
  height: 100px;
}

.right-header {
  float: right;
  width: 50%;
}

#msform .formPage {
  height: 662px;
  padding: 35px;
  box-sizing: border-box;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}


/*Hide all except first fieldset*/

#msform>.formPage~.formPage {
  display: none;
}


/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}


/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
  /*CSS counters to number the steps*/
  counter-reset: step;
  position: relative;
  z-index: 1;
}


/*This is the li circle*/

#progressbar li {
  counter-increment: step;
  width: 27px;
  height: 27px;
  background-color: #dcdedf;
  margin-left: 35px;
  border-radius: 50%;
  list-style-type: none;
  float: left;
}


/*Display the li number*/

#progressbar li:before {
  content: counter(step);
  text-align: center;
  line-height: 26px;
  display: block;
  color: white;
}


/*progressbar connectors*/

#progressbar li:after {
  content: "";
  width: 38px;
  height: 10px;
  background-color: #dcdedf;
  position: relative;
  top: -18px;
  left: -36px;
  display: block;
  z-index: -1;
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active,
#progressbar li.active:after {
  background: #3395ff;
  color: white;
}

#progressbar li:first-child {
  margin-left: 0;
}

.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  padding: 5px 15px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<div class="modal">
  <div class='modal-content'>
    <div class='modal-header'>
      <span class="close" data-action="close-modal">x</span>
      <div class="left-header">
        <span>Add new App</span>
        <span></span>
      </div>

      <div class="right-header">
        <!-- progressbar -->
        <ul id="progressbar">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <hr/>
    <div class="modal-inner-content">
      <form id="msform">
        <div class="formPage">
          <h2 class="fs-title">Create your account</h2>
          <h3 class="fs-subtitle">This is step 1</h3>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="pass" placeholder="Password" />
          <input type="password" name="cpass" placeholder="Confirm Password" />
          <input type="button" name="next" class="next action-button" value="Next" />
        </div>
        <div class="formPage">
          <h2 class="fs-title">Social Profiles</h2>
          <h3 class="fs-subtitle">Your presence on the social network</h3>
          <input type="text" name="twitter" placeholder="Twitter" />
          <input type="text" name="facebook" placeholder="Facebook" />
          <input type="text" name="gplus" placeholder="Google Plus" />
          <input type="button" name="previous" class="previous action-button" value="Previous" />
          <input type="button" name="next" class="next action-button" value="Next" />
        </div>
        <div class="formPage">
          <h2 class="fs-title">Personal Details</h2>
          <h3 class="fs-subtitle">We will never sell it</h3>
          <input type="text" name="fname" placeholder="First Name" />
          <input type="text" name="lname" placeholder="Last Name" />
          <input type="text" name="phone" placeholder="Phone" />
          <textarea name="address" placeholder="Address"></textarea>
          <input type="button" name="previous" class="previous action-button" value="Previous" />
          <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </div>
        <div class="formPage">
          <h2 class="fs-title">Social Profiles</h2>
          <h3 class="fs-subtitle">Your presence on the social network</h3>
          <input type="text" name="twitter" placeholder="Twitter" />
          <input type="text" name="facebook" placeholder="Facebook" />
          <input type="text" name="gplus" placeholder="Google Plus" />
          <input type="button" name="previous" class="previous action-button" value="Previous" />
          <input type="button" name="next" class="next action-button" value="Next" />
        </div>
        <div class="formPage">
          <h2 class="fs-title">Social Profiles</h2>
          <h3 class="fs-subtitle">Your presence on the social network</h3>
          <input type="text" name="twitter" placeholder="Twitter" />
          <input type="text" name="facebook" placeholder="Facebook" />
          <input type="text" name="gplus" placeholder="Google Plus" />
          <input type="button" name="previous" class="previous action-button" value="Previous" />
          <input type="button" name="next" class="next action-button" value="Next" />
        </div>

      </form>
    </div>
  </div>
</div>