Element disappearing under layers despite z-index: 4 (highest layer)

Despite having used z-index: 4 (highest layer) and it being correctly applied as I can see through the browser console, an element keeps disappearing from the screen. Any pointers welcome.

Please see links to images below (can't embed image in question yet, because of my Stackoverflow karma, so please bear with me). Relevant code below:

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 Answer
1

Masthead, the container to masthead__navigation, had been set overflow: hidden, while masthead__navigationhad been set to overflow with a forced width: 100vw.

Masthead

masthead__navigation

overflow: hidden

masthead__navigation

width: 100vw

The fix was to set overflow: visible for the cases in which the CSS wasn't working

overflow: visible

i.e. for Desktop

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


This made the screen scroll horizontally, so overflow: hidden applied to body stopped the scrolling:

overflow: hidden

body

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.