个人中心
gpt4 book ai didi

html - 尽管 z-index : 4 (highest layer)，元素在层下消失

转载 作者：行者123 更新时间：2023-11-28 01:20:58 25 4
gpt4 key购买 nike

尽管使用了 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>

最佳答案

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

解决方法是为 CSS 不工作的情况设置 overflow: visible

i.e. for Desktop

@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;
}

关于html - 尽管 z-index : 4 (highest layer)，元素在层下消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51496271/

25 4 0
文章推荐： html - BEVM 有效还是我们可以单独使用修饰符？
文章推荐： css - 使游戏响应(适应不同的屏幕尺寸)
文章推荐： css - 如何通过 'className1' 或 'className2' 定位元素？
文章推荐： php - 对于每第 4 个和第 5 个元素，将此类应用于 HTML
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com