A div element with a z-index of 9 remaining below another element with a z-index of 1

Even with a higher z-index, my <h4> and <a> elements are not visible above the background.

<section class="no-padding main-slider mobile-height wow fadeIn">
  <div class="swiper-full-screen swiper-container height-100 width-100 white-move">
    <div class="swiper-wrapper">

      <div class="swiper-slide equalize xs-equalize-auto">
        <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
          <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%;"></div>
          <div class="display-table width-100 height-100">
            <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
              <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1">TEXT</h4>
              <a href="#itin" style="z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
            </div>
          </div>
        </div>
      </div>

My goal is to position both the <h4> and the <a> elements above the background by adjusting the z-index property.

htmlcss

Answer №1

Ensure to include a z-index value for your h4 tag and set the position property to something other than the default value of static. To make this work effectively, try setting position: relative and assigning a z-index value for your h4 element:

<div class="swiper-slide equalize xs-equalize-auto">
  <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
    <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%;z-index:8"></div>
    <div class="display-table width-100 height-100">
      <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
        <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1" style="position:relative; z-index: 9">TEXT</h4>
        <a href="#itin" style="position:relative; z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
      </div>
    </div>
  </div>
</div>

Answer №2

When using z-index, make sure to apply it to elements with position:relative;

For example:

<section class="no-padding main-slider mobile-height wow fadeIn">
  <div class="swiper-full-screen swiper-container height-100 width-100 white-move">
<div class="swiper-wrapper">
<div class="swiper-slide equalize xs-equalize-auto">
  <div class="col-md-12 col-sm-12 col-xs-12" style="background-image:url('img/bg1.jpg'); background-size: cover">
    <div style="background-color: rgba(0, 0, 0, 0.5); position: absolute; height: 100%; width: 100%; z-index:8"></div>
    <div class="display-table width-100 height-100">
      <div class="display-table-cell vertical-align-middle text-left padding-twelve-all xs-padding-five-all xs-padding-90px-top">
        <h4 class="text-swipe-title text-white margin-auto alt-font font-weight-600 letter-spacing-minus-1" style="position:relative; z-index: 9">TEXT</h4>
        <a href="#itin" style="position:relative; z-index: 9" class="btn btn-small btn-rounded btn-secondary margin-50px-top xs-margin-20px-top">TEXT</a>
      </div>
    </div>
  </div>
</div>
</section>

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

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

htmlcsstwitter-bootstrap

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

Eliminating the vertical scroll on a webpage with the help of Bootstrap 5's responsive design capabilities

I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...

htmlcssbootstrap-5responsive

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

Create a visually appealing collage using CSS without the need for traditional IMG tags

I'm currently working on a fun little project. My goal is to create a photo grid in HTML5 that displays 3x4 pictures (without using Divs) and adding all the images via CSS, meaning no img tag in the HTML file. The challenge is to make this grid respo ...

csshtmlgridcss-grid

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

javascriptjqueryhtmlperformancegoogle-chrome

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

I am working on creating a portfolio in Django. I have a section in my HTML code that connects to my jobs list in Django using {% for ... %} in order to display images, summaries, and titles of my projects. However, there is an ID within this div that refe ...

cssdjangodjango-templates

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

jquerycss

"Storing a collection of PDF files in an array in TypeScript Angular - A step-by-step

Here we have an HTML code snippet that includes an input file element with Angular: <input type="file" class="btn btn-info" id="archivoPDF" #PDFfile value="Seleccionar PDF(s)" accept="application/pdf" multiple /> And this is the TypeScript code sni ...

htmlarraysangulartypescriptpdf

Enhancing Tapestry Grid component column sort icons

In the Tapestry Grid components, the default column sort icons are blue and white, but if your page has a different color scheme, you may want to personalize them. How can you replace the default Tapestry Grid column sort icons with your own custom icons? ...

csstapestry

Excessive margin-left values for CSS div positioning are simply outlandish

http://jsfiddle.net/SVJaK/1338/ I attempted to create a small space between the green divs and my right div in this fiddle. I had to specify a very large pixel margin-left value to achieve that slight gap. Can someone explain why? Even though the gap is a ...

htmlcsspositionmargin

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...

htmlcss

Reverting the box color changes in the opposite order of clicking them using HTML, CSS, and Jquery

As someone new to front end development, I am experimenting with creating multiple boxes using HTML, CSS, and jQuery. My goal is to have the boxes change color to blue when clicked, then revert back to their original color in the reverse order they were cl ...

jqueryhtmlcss

The frozen first column in a CSS table does not have consistent height with the rest of the row

Having trouble with freezing the first column of a table and aligning the height of the first cell with the rest of the row? Check out the issue in the image below: https://i.sstatic.net/v5xHU.png For a live example, you can also visit this jsfiddle link ...

htmlcss

Is there a way to showcase an HTML body in the Gmail app on iOS?

I am facing a challenge while trying to incorporate HTML formatting in the body of an email shared through Gmail using UIActivityViewController on iOS. Despite my efforts, the Gmail application fails to render the HTML content properly and only displays pl ...

htmliosobjective-cgmailuiactivityviewcontroller

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

htmlcarouselbootstrap-5

Is it possible for me to set my HTML body class as ".body" in CSS?

CSS .body { background: linear-gradient(-45deg, rgb(255, 0, 0), rgba(216, 29, 29, 0.856), #fdfdfdd7, #234cd5, #ffffff); background-size: 400% 400%; background-repeat:no-repeat; animation: gradient 35s ease infinite; height: 100vh; } HT ...

htmlcsstagsdocument-body

The visibility of the button background created with :before will only be apparent when a content property is specified

There's an unusual issue I've encountered... I have a simple button, nothing out of the ordinary, just a basic button like this <button class="btn btn--error"> Button Text </button> Now, I want to add an image next to my button ...

htmlcss