Object vanishing beneath layers despite z-index: 4 (topmost layer)

Despite using z-index: 4 as the highest layer, the element keeps disappearing from the screen. I can confirm that it is correctly applied through the browser console. Any suggestions are appreciated.

Please refer to the links below for images (I can't embed images in the question yet due to my Stackoverflow karma limitations). Relevant code provided 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;
}
}

htmlcss

Answer №1

Header, the main container for header__navigation, was originally set with overflow: hidden. However, header__navigation had a forced width: 100vw.

The solution was to change overflow: visible in cases where the CSS wasn't functioning correctly.

For example, on Desktop:

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

This adjustment caused the screen to scroll horizontally, so setting overflow: hidden on body prevented the scrolling:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When rails code is placed within haml tags, it results in generating empty spaces within the HTML tags of browsers

Every time a rails variable is nil (or when using rails code (as seen in the third code example)), my html displays a string of empty characters. new.html.haml %h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => ...

ruby-on-railshtmlcsshaml

What could be causing the unexpected gap between the first two elements and the third in my flexbox layout?

I am facing an issue with the layout of my third child element. Instead of appearing below the first two children, it is wrapping around to the bottom of the container. Can anyone explain why this is happening and suggest a solution? Even though I have se ...

htmlcssflexbox

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

Transitioning into a WebView HTML link

In my app, there is a help feature represented by a WebView that loads an HTML file containing all the necessary information for user assistance. Within this HTML file, there are various anchors that I want to navigate to depending on which activity trigg ...

androidhtmlwebviewanchor

What is the best way to eliminate the space between <div> elements?

I am looking to arrange <div> elements in a specific layout where one is at the top, three are in the middle in a row, and one is at the bottom without any extra space. It is necessary that there remains a space between the middle <div>s and th ...

htmlcss

Failed CSS login form

Take a look at my login-form (here). I am having an issue where the Text-Field is not aligning properly with the login field - it seems to be shifted 10px to the left and right (margin). Can anyone point out what mistake I might have made? Your help would ...

cssformsauthentication

Issue with image position shifting due to Bootstrap 4 Modal opening and closing

In the code snippet below, a bs4 modal is opened through a button when hovered over. The problem arises when the modal is closed after being opened, causing the image to move unexpectedly. This issue can be resolved by hovering over the container again. T ...

csstwitter-bootstrapbootstrap-4modal-dialog

Creating an animated scrolling image effect: A step-by-step guide

My current project involves implementing a scrolling textbox. I have put together the following snippet to achieve this: <html> <head> <style type="text/css"> #scroll { position: absolute; white-space: nowrap; ...

javascripthtml

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

javascripthtmlcssparallaxskrollr

Deciphering text using XQuery and <a> elements

Utilizing XQuery for extracting data from HTML pages has been quite an interesting challenge. The structure of the HTML body that I am working with looks something like this: <td> <a href ="hw1">xyz </a> Hello world 1 ...

htmlxmlxqueryhtml-parsinghtml-content-extraction

Encountering a NullPointerException when transferring inputs from scala.html to Controller as a form in Play framework (version 2.8.*) using

I am currently developing a Java web application using the Play Framework (2.8.19). In the process of creating a registration page, I encountered an issue with passing inputs from the registration page written in Scala to the controller class that is respo ...

javahtmlpostgresqlplayframeworkplayframework-2.8

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...

javascripthtmlreactjsnext.js

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

javascriptcssinternet-explorerfirefoxcross-browser

What is the mechanism behind YouTube automatically playing music videos when we visit a channel's homepage?

Since Chrome version 66, autoplay of videos with music has been restricted to muted playback. However, I recently noticed that on certain YouTube channel pages, the videos were autoplaying with sound, even when using the HTML video API. How is YouTube able ...

htmlhtml5-video

I am looking to include a popover within my modal using Bootstrap version 3.0.2

Hey there, I'm having an issue where the popover that should be inside the modal is actually appearing outside of it in the top left corner, not visible within the modal itself. Below is my index code: <button type="button" id="example" class="bt ...

javascriptjquerycsstwitter-bootstrap

Customizing textarea maxLength for various languages: A comprehensive guide

My form includes a textarea that allows users to input text in either English, Chinese, or both languages. The maxLength="50" attribute works well for limiting English characters, but I need to restrict Chinese characters to only 20. Furthermore, if the ...

javascripthtml

What is the process for extracting the sessionId and viewstate variables from this code?

This Question Might Have Been Asked Before: Find the HREF Attribute of an A Element I'm struggling with extracting the sessionId and viewstate variables from this piece of code. Can someone assist me? The code snippet in question is as follows: ...

phphtmlregexlibcurl

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

The Angular routing feature seems to be malfunctioning as the URL is showing up but the page fails to load

After including angular.min.js and angular-route.min.js I encountered an issue where clicking the login button would change the URL to '/home', but the home.html page wouldn't load. I attempted adding a controller under templateUrl, but it ...

htmlangularjsauthenticationangular-routing