In the hierarchy of web design elements, z-index takes precedence over css background images, which in turn take precedence over absolutely positioned

How can I position my p tag above all other elements?

Here is the code snippet:

HTML
    <section class="key-fundamentals">
        <div class="container">
            <img class="img-man-cbox img-responsive" src="images/img-man-cbox.png">
                <p>Our key fundamentals</p>
        </div>
    </section>

CSS

.key-fundamentals {
 z-index: -999;
 height: 535px;
 background-image: url('../images/bg-fundamentals.png');
 background-position: center;
 background-repeat: no-repeat;
}
.key-fundamentals .img-man-cbox {
  z-index: 1;
  position: absolute;
  top: 782px;
  left: 80px;
}
.key-fundamentals p{
 z-index: 2;
 color: red;
}

The h1 tag appears below the img2 image when set to absolute.
Setting z-index to -1 for img2 makes the image disappear.

Please provide assistance, thank you!

Appreciate the help in advance...

Answer №1

In order for the z-index property to take effect, the element must have a position other than static

.essential-keys p {
 position: relative;         /*  added this property  */
 z-index: 2;
 color: blue;
}

.essential-keys {
  z-index: -999;
  height: 500px;
  background-image: url('../images/bg-essentials.png');
  background-position: center;
  background-repeat: no-repeat;
}

.essential-keys .img-person-container {
  z-index: 1;
  position: absolute;
}

.essential-keys p {
  position: relative;
  z-index: 2;
  color: blue;
}
<section class="essential-keys">
  <div class="container">
    <img class="img-person-container img-responsive" src="http://placehold.it/150/ddd">
    <p>Our essential keys</p>
  </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

Incorporate web control's stylesheet into page with UpdatePanel registration

What is the most effective way to register a stylesheet only once on a page using a custom web control? Keep in mind that the page utilizes an UpdatePanel for asynchronous calls. I attempted placing the <link> tag in ScriptManager.RegisterClientScrip ...

Guide: Creating a delete button that removes a designated post

I am encountering an issue with the delete button and dialog in my application. The button does not delete the correct post; instead, it always starts deleting from the first post that results in deleting all posts. Furthermore, the template does not displ ...

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

JavaScript is currently not executing properly. According to Firebug, the message states to "reload the page to obtain the source for: ..."

I'm currently working on creating a bookmarklet that adds some JavaScript elements to the head of a webpage. However, I've noticed that one of them is not loading properly. Is there a solution to this issue? Is it possible to reload the page wit ...

JavaScript code is not functioning properly on Internet Explorer 10

Upon selecting an option, I need to activate buttons. This functionality works smoothly in all browsers except for IE10. The HTML for the select element: <select id="tenants" name="tenants" size="10" class="reportOption" onchange=""> <option va ...

Is it possible to remove the parent element using CSS?

Is there a method to remove the parent element while retaining the current element? Take a look at my example here: <div id="parent"> <div id="child"> <span>some text</span> </div> </div> div { ...

The menu appears with a gentle fade and smoothly descends into place

I am embarking on my first venture into creating an animated menu. Take a look at this image to see what I have in mind: The arrows serve as a visual representation of my desire for the names to drop down and fade in when the menu button is clicked. Addi ...

The navigation bar is not floating to the right of the <header> element

Having trouble with my header element and nav not floating to the right using "float: right;" Just dipping my toes into html&CSS, seeking assistance to make my nav bar float to the right. I've watched a few videos and checked out Stack Overflow, ...

Floating and scrolling navigation bar not functioning properly in bootstrap framework

I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I n ...

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

Import information from a website into MATLAB, including embedded internal frames (iframes)

Recently, I've been using MATLAB's urlread function to fetch website content for further analysis. However, I encountered a specific site where the data I'm looking for is housed within an internal frame embedded in the main index.php file ...

Step-by-step guide on creating a blank horizontal line in an HTML table

Can anyone help me figure out how to draw a horizontal line connecting from td 1 to td 4 without relying on content CSS? I'm envisioning a progress bar like the one shown in the following image: https://i.sstatic.net/on8Bi.png <table> < ...

Json does not retain the data from the input file

Greetings! I just finished creating a form that looks like the following: <form method="post" Action="Save.php" enctype="multipart/form-data"> <label>Name:</label><br><br> <input name=" ...

Incorporate zoom feature into the jQuery polaroid gallery

Currently, I am utilizing a jQuery and CSS3 photo gallery found on this website. My goal is to allow the images to enlarge when clicked, however, the method provided by the author isn't very clear to me, as I'm not an expert in jQuery. I attempt ...

Unable to access and control HTML elements using JavaScript

let button = document.getElementsByTagName('button'); button.value = 8; //button.textCont = 'X'; --- DOESN'T WORK. //button.innerHTML = 'X'; --- DOESN'T WORK. body { ...

During the animation sequence, the element is seen ascending

I'm encountering a small issue with one of the elements I'm animating - it's moving up slightly during the animation process. It elevates about 2-3 pixels while the animation is playing, then snaps back down once it's completed. The el ...

Dynamically adjusting the background color of table elements using JavaScript

Snippet code copied from this link In my app, clicking on the Add New Item button dynamically adds rows. Clicking on any number in the table populates it in the corresponding row. Hovering over the 1st row changes its background color to green along with ...

The Bootstrap 4 container with a height of 100vh is overflowing when placed within a column with

I'm still learning the ropes of bootstrap. I have a bootstrap 4 page with three columns, and in the middle column, there's a container housing 4 images in a grid format. My goal is to have this container take up as much space as possible on large ...

Ways to toggle the visibility of an element based on the condition of two other elements

I'm facing a challenging UI use-case that I just can't crack. I have 2 non-nested divs that are causing me trouble (not nesting is crucial here as it would have made things much simpler). Here is the structure of the divs: <div class="a"> ...

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...