代码之家  ›  专栏  ›  技术社区  ›  Pat

尽管z指数为4(最高层),元素仍在层下消失

css html
  •  0
  • Pat  · 技术社区  · 7 年前

    尽管使用了z-index:4(最高层),而且正如我在浏览器控制台中看到的那样,它被正确地应用了,但一个元素还是不断地从屏幕上消失欢迎任何指点。

    请看下面的图片链接(还不能嵌入有问题的图片,因为我的堆溢业力,所以请忍受我)相关代码如下: 

        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 回复  |  直到 7 年前
        1
  •  0
  •   Pat    7 年前

    Masthead ,容器将 masthead__navigation ,已设置 overflow: hidden ,而 刊头导航 已经被设置为溢出 width: 100vw .

    解决办法是 overflow: visible 对于CSS不工作的情况

    即用于桌面 

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

    这使得屏幕水平滚动,所以 溢出:隐藏 适用于 body 停止滚动: 

    html, body {
    max-width: 100%;
    overflow: hidden;
}
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    7 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    7 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    7 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    7 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    7 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    8 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    8 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    8 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    8 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    8 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号