尽管z-index元素在层下消失：4（最高层）

时间：2018-07-24 10:26:49

标签： html css

尽管使用了z-index：4（最高层），并且通过浏览器控制台可以正确地应用它，但是元素一直在屏幕上消失。任何指针都欢迎。

请查看以下图像的链接（由于我的Stackoverflow业障，无法嵌入有问题的图像，请耐心等待）。下面的相关代码：

    html {
	height: 100%
}


h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Merriweather;
	font-weight: 700
}



body {
	height: 100%;
	min-height: 35rem;
	position: relative;
	font-family: 'Source Sans Pro';
	font-weight: 300;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

video {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translateX(-50%) translateY(-50%);
	z-index: 0
}



@media (pointer:coarse) and (hover:none) {
	body {
		background: url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
		background-position: cover
	}

	body video {
		display: none
	}

}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #cd9557;
	opacity: .7;
	z-index: 1
}

.masthead {
	position: relative;
	overflow: hidden;
	padding-bottom: 3rem;
	height: 80%;
	z-index: 3
}

.masthead .masthead-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	min-height: 35rem;
	height: 100%;
	background-color: rgba(0, 46, 102, .8);
	transform: skewY(4deg);
	transform-origin: bottom right
}

.masthead .masthead-content h1 {
	font-size: 2.5rem
}

.masthead .masthead-content p {
	font-size: 1.2rem
}

.masthead .masthead-content p strong {
	font-weight: 700
}

.masthead .masthead-content .input-group-newsletter input {
	font-size: 1rem;
	padding: 1rem
}

.masthead .masthead-content .input-group-newsletter button {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 1rem
}

@media (min-width:768px) {
	.masthead {
		height: 100%;
		min-height: 0;
		width: 40.5rem;
		padding-bottom: 0
	}

	.masthead .masthead-bg {
		min-height: 0;
		transform: skewX(-8deg);
		transform-origin: top right
	}

	.masthead .masthead-content {
		padding-left: 3rem;
		padding-right: 10rem
	}

	.masthead .masthead-content h1 {
		font-size: 3.5rem
	}

	.masthead .masthead-content p {
		font-size: 1.3rem
	}

}

.social-icons {
	position: absolute;
	margin-bottom: 2rem;
	width: 100%;
	z-index: 2
}

.social-icons ul {
	margin-top: 2rem;
	width: 100%;
	text-align: center
}

.social-icons ul>li {
	margin-left: .75rem;
	margin-right: .75rem;
	display: inline-block
}

.social-icons ul>li>a {
	display: block;
	color: #fff;
	background-color: rgba(0, 46, 102, .8);
	border-radius: 100%;
	font-size: 1rem;
	line-height: 2rem;
	height: 2rem;
	width: 2rem
}

@media (min-width:768px) {
	.social-icons {
		margin: 0;
		position: absolute;
		right: 2.5rem;
		bottom: 2rem;
		width: auto
	}

	.social-icons ul {
		margin-top: 0;
		width: auto
	}

	.social-icons ul>li {
		display: block;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 2rem
	}

	.social-icons ul>li:last-child {
		margin-bottom: 0
	}

	.social-icons ul>li>a {
		transition: all .2s ease-in-out;
		font-size: 1rem;
		line-height: 2rem;
		height: 2rem;
		width: 2rem
	}

	.social-icons ul>li>a:hover {
		background-color: #002e66
	}

}

@media (min-width:768px) {
	.mastfoot {
		color: #999 !important;
	  color: rgba(255, 255, 255, .5) !important;
		position: absolute !important;
		bottom: 10px !important;
		margin-left: 4rem !important;
		margin-right: 10rem !important;
		z-index: 3
	}

	.inner-mastfoot {
		font-size: 0.8rem;
		text-align: left !important
	}

}

.btn-secondary {
	background-color: #cd9557;
	border-color: #cd9557;
	border-top-right-radius: 6px !important;
	border-bottom-right-radius: 6px !important;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
	background-color: #ba7c37!important;
	border-color: #ba7c37!important
}

.input {
	font-weight: 300!important
}

.mastfoot {
	color: #262626;
	color: rgba(26, 26, 26, .5);
	position: absolute;
	bottom: 10px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	z-index: 3
}

.inner-mastfoot {
	font-size: 0.8rem;
	text-align: center
}

.inner-mastfoot a {
	color: inherit;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: initial;
	text-decoration: none;
	-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
	transition: color 0.2s ease-out, border-bottom-color 0.2s ease-in-out;
}

	.inner-mastfoot a:hover {
    text-decoration: none;
    color: bolder;
    border-bottom-color: transparent;
}

@media (min-width:768px) {

	.nav-masthead .nav-link {
				color: #262626 !important;
			  color: rgba(26, 26, 26, .5) !important;
	}

	.nav-masthead .nav-link:hover,
	.nav-masthead .nav-link:focus {
			border-bottom-color: rgba(26, 26, 26, .5) !important;
	}

	.nav-masthead .active {
			  color: #000 !important;
			  border-bottom-color: #000 !important;
	}
}

.masthead__navigation {
		margin-bottom: 2rem;
		padding-bottom: 0 !important;
		width: 100vw !important;
}

.inner-masthead {
    margin-bottom: 0;
		z-index: 4 !important
}

.nav-masthead .nav-link {
		  padding: .25rem 0;
		  font-weight: 700;
			color: #999;
		  color: rgba(255, 255, 255, .5);
		  background-color: transparent;
		  border-bottom: .25rem solid transparent;
			z-index: 4 !important
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
		  border-bottom-color: rgba(255, 255, 255, .5);
}

.nav-masthead .nav-link + .nav-link {
		  margin-left: 1rem;
}

.nav-masthead .active {
		  color: #fff;
		  border-bottom-color: #fff;
}

@media (min-width: 48em) {
	.inner-masthead {
	    float: left;
	}
	.nav-masthead {
	    float: right;
	}
}
   

 <!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>X</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/coming-soon.min.css" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/codechair.github.io-integrante/assets/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/codechair.github.io-integrante/assets/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/codechair.github.io-integrante/assets/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/codechair.github.io-integrante/assets/images/favicon/site.webmanifest">
    <link rel="mask-icon" href="/codechair.github.io-integrante/assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/codechair.github.io-integrante/assets/images/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="/codechair.github.io-integrante/assets/images/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>

  <body>

    <div class="overlay"></div>
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
      <source src="mp4/bg.mp4" type="video/mp4">
    </video>

  <div class="masthead">
    <header class="masthead__navigation mb-auto d-flex w-100 p-3 mx-auto flex-column">
      <div class="inner">
        <a class="inner-masthead" href="{{ '/' | absolute_url }}"><img src="/assets/images/logo.jpg" style="max-height:40px; width:auto;"></a>
        <nav class="nav nav-masthead justify-content-center">
          <a class="nav-link active" href="#">Home</a>
          <a class="nav-link" href="#">Blog</a>
          <a class="nav-link" href="#">Join Newsletter</a>
          <a class="nav-link" href="#">Contact</a>
        </nav>
      </div>
    </header>
      <div class="masthead-bg"></div>
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-12 my-auto">
            <div class="masthead-content text-white py-5 py-md-0">
              <h1 class="mb-3">Register</h1>
              <p class="mb-5">Building a X.
              We're building X for you. <strong>Request an invitation for early access using the form below!</strong></p>
              <form action="https://hen.us18.list-manage.com/subscribe/post" method="POST" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
                <input type="hidden" name="u" value="377b993ba697354f6584371c9">
                <input type="hidden" name="id" value="e1c7ba1f4b">
                <div class="input-group input-group-newsletter">
                  <input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" class="form-control" placeholder="Enter your email..." aria-label="Enter email..." aria-describedby="basic-addon">
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="submit">Notify Me!</button>
                  </div>
                    <input type="hidden" name="ht" value="f5b0455009025ab4743b2ecc932316028905c673:MTUzMTgyNjMzMC43NDM3">
                    <input type="hidden" name="mc_signupsource" value="hosted">
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div class="mastfoot">
      <div class="inner-mastfoot">
        &copy; 2018 X Ltd. All Rights Reserved. &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/legal">Legal</a> &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/contact">Contact</a>
      </div>
  </div>

    <div class="social-icons">
      <ul class="list-unstyled text-center mb-0">
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-envelope"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-medium"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-linkedin"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
      </ul>
    </div>




    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/coming-soon.min.js"></script>

  </body>

</html>

1 个答案:

答案 0 :(得分：0)

Masthead，masthead__navigation的容器，已设置为overflow: hidden，而masthead__navigation已设置为强制width: 100vw溢出。

解决方法是针对CSS无法正常工作的情况设置overflow: visible

  

即用于桌面

@media (min-width:768px) {
    .masthead {
        height: 100%;
        min-height: 0;
        width: 40.5rem;
        padding-bottom: 0;
        overflow: visible
    }

这使屏幕水平滚动，因此将overflow: hidden应用于body可以停止滚动：

html, body {
    max-width: 100%;
    overflow: hidden;
}
相关问题
最新问题