Z-Index not functioning as expected

I've been trying to position my <h1> header on top of a light div with a background image called light.png. I used Z-index to stack them and added position:relative, but for some reason, the <h1> is not showing above the <div class=light>.

Can someone help me figure out what I'm doing wrong? Here's the relevant section of my HTML code:

<body>
    <div class="light"></div>
    <h1>sdfdsf</h1>
</body>

This is my CSS code:

body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat;
    z-index:1;
}
.light {
    background-image: url(images/light.png);
    margin-left:auto;
    margin-right:auto;
    z-index:2;
    width:763px;
    height:566px;
    position:relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(255,255,255,1);
    position:relative;
    z-index:5;
}
htmlcssz-index

Answer №1

To implement this, simply nest your <h1> tag within the <div> element.

<div class="light">
    <h1>sdfdsf</h1>
</div>

Check out a live example here: Tinkerbin
I adjusted the background color for demonstration purposes.

No need to incorporate z-index for achieving this effect.

Answer №2

Fiddle

Do not need to set the z-index property for the body tag.

Markup - 

<div class="light"></div>
<h1>hi</h1>​

CSS - 

.light {
    background-image: url(http://www.ostpl.com/Gallery/web-hosting.jpg);
    margin-left:auto;
    margin-right:auto;
    z-index:1;
    width:763px;
    height:566px;
    border: 1px solid #f00;
    position: relative;
}
h1 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 48px;
    color: rgba(0,0,0,1);
    position:absolute;
    left: 0;
    top: 0;
    z-index:2;
}​

Answer №3

Below is an illustration of the concept I mentioned in my previous comment:

html code:

<body>
  <div class='outer'>
      <div class="light"></div>
      <h1>sdfdsf</h1>
  </div>
</body>

css code: 

body {
   background-image: url(images/bg.jpg);
   background-repeat: repeat;
}

.outer{
   position:relative;
}
.light {
   background-image: url(images/light.png);
   margin-left:auto;
   margin-right:auto;
   width:763px;
   height:566px;
   position:absolute;
}
h1 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 48px;
   color: rgba(255,255,255,1);
   position:absolute;
   z-index:99999999999;
   top:0;
   left:0;
}

While you have the option to use all position relatives, this method may not be fully compatible with all browsers due to potential CSS issues. Therefore, I suggest utilizing this approach for broader browser support across both older and newer versions.

Answer №4

insert the <h1> tag within the light div

 <body>
    <div class="light">
      <h1>sdfdsf</h1>
    </div>
</body>

Answer №5

Consider using absolute positioning

<style type="text/css" media="screen">
    body {
        background-color: black;
        background-repeat: repeat;
        z-index:1;
    }
    .light {
        background-color: yellow;
        margin-left:auto;
        margin-right:auto;
        z-index:2;
        width:763px;
        height:566px;
        position:absolute;
    }
    h1 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 48px;
        color: rgba(255,255,255,1);
        position:absolute;
        z-index:5;
    }
</style>
  • Absolute Positioning: The element is positioned relative to its first positioned ancestor element (not static)
  • Relative Positioning: The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's left position

Answer №6

Check out the DEMO

Here is a simple HTML structure:

<body>
  <div class="light"></div>
  <h1>sdfdsf</h1>
</body>​

And here is the corresponding CSS code:

.light {
    position:relative;
    width: 300px;
    height: 100px;
    background: #ccc;
    z-index: 1;
}

h1 {
    position:relative;
    z-index: 2;
    top: -10px;
}​

Remember, a bigger z-index value means a higher stacking order for the element.

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

The select tag is malfunctioning in the Firefox browser upon clicking with the mouse

One of the select tags in my application is causing issues in Firefox browser. Although all other select tags in different pages work fine, this particular page seems to be problematic. When attempting to change the option in the select tag, it fails to r ...

htmlfirefoxtwitter-bootstrap-3mouseangularjs-1.2

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

csshtmljinja2templating

Align list items in the center horizontally regardless of the width

I have created this container element: export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `; The current setup is vertically centering three list items within the container. However, I am now looking ...

javascriptcssreactjsnext.js

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

Using HTML and CSS, create a layout with three columns where the side columns are flexible in width and the middle

Currently, I am facing an issue with the header design of my website. The layout consists of 3 columns of divs and my goal is to have a middle column with a fixed width of 980px. In addition, I want the left side of the header to span across the entire bro ...

htmlcsswidthfill

AngularJS selector, offering similar functionality to jQuery

There are 3 div elements with the same class in an HTML code snippet: <div class="hide"> </div> <div class="hide"> </div> <div class="hide"> </div> In jQuery, all the div elements can be hidden with a single code sta ...

jqueryhtmlangularjsjquery-selectors

Trying to open the DB URL in a new tab when using PHP and MySQL will not work as expected

Before I begin, I want to express my gratitude to the community of StackOverFlow users for providing valuable answers. As a novice in PHP/mySql, I am learning through books and examples from others. Currently, my issue revolves around a MySQL database wit ...

phphtml

Discover the steps for incorporating the substring method into JavaScript to manipulate input strings

Is there a way to extract the specified portion of text from an input string using HTML and Javascript? <!DOCTYPE html> <html> <body> <input type="text" value="exampleString"></input> <button onclick=& ...

javascripthtmlsubstring

Pressing an HTML button can enable and disable the pause and resume functions

Currently, I am working on an audio player where I need to implement functionality to pause and resume the playback. I have already set up the pause() and resume() functions in my script. The issue I am facing is related to the HTML button that triggers th ...

javascripthtml

What options do I have for personalizing this Google Bar Graph?

I am currently working on creating a Google bar chart. You can view my progress here: http://jsfiddle.net/nGvdB/ Although I have carefully reviewed the Google Bar Chart documentation available here, I am struggling to customize the chart to my needs. Spec ...

javascripthtmlajaxgoogle-visualization

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

CSS grid layout for box alignment

I need the first two boxes to be positioned at the top with maximum width and the following two boxes to be placed at the bottom with the maximum width. Below are the CSS and HTML codes provided: CSS Code: /* Start Services */ .services { padding-top ...

htmlcssgrid

Utilizing ReactJS to fetch data from Material-UI's <TableRow/> component upon selection - a comprehensive guide

I've integrated Material-UI's <Table/> (http://www.material-ui.com/#/components/table) component with <TableRow/> containing checkboxes in a ReactJS project. While I can successfully select rows by checking the boxes, I am struggling ...

javascripthtmlreactjsmaterial-ui

What is the best way to customize the style using a CSS class?

Is it possible to alter a specific style with a CSS class using jQuery or JavaScript? For example, if the HTML looks like this: <tab> <a class="anchor">a</a> </tab> And the CSS looks like this: a {border:1px} .anchor {color: ...

javascriptjquerycss

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

javascriptjqueryhtmlcssangularjs

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

cssvue.jsbootstrap-4

Disappearing Act: The vanishing act of Bootstrap 4 navbar

Everything works perfectly on a large screen, but disappears when resizing. I haven't specified a height property for the navbar. Here's the Fiddle. I know this question has been asked many times before, but I have yet to find a solution that act ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to have a div automatically scroll when hovered over, while also hiding the scroll bar specifically for that div?

Is there a way to autoscroll a specific element onmouseover or via an image map while also hiding the scrollbars for that div? I seem to be struggling with this task despite weeks of learning javascript and not being able to find the right solution online. ...

javascripthtmlonmouseoverautoscroll

Creating a dynamic HTML table by dynamically populating a column

I have limited experience with javascript, and I am working on a personal project that I enjoy. In the table below, you will find various location names along with their distances from the initial location. This serves as a travel companion for me to refe ...

javascripthtmlhtml-table

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml