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

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

imagecssvue.jsbootstrap-4

Using Javascript to extract and organize JSON arrays from various sets of checkboxes

Is there a way to automatically create an array of multiple groups of arrays like this: arr = {arr1:{index:value, index2:value2}, arr2:{index,value, index2:value2}}; The order is based on groups of checkboxes in HTML (see example below): <div class=& ...

javascripthtmlarraysjson

Generate a link that can easily be shared after the content has loaded using

One feature on my website involves a content container that displays different information based on which list item is clicked (such as news, videos, blogs, etc.). This functionality is achieved by using jQuery's load method to bring in html snippets ...

javascriptphpjqueryhtmlajax

I'm looking to include a field card into the to-do table I built using .Net, but I'm not sure where I made a mistake

HTML Challenge I have set a goal to dynamically add a DOM element using JavaScript when the "Add HTML Element" button is clicked. The process involves clicking the button, which opens a modal for inputting necessary information. After fil ...

javascripthtmlasp.net-mvcdom

How come my jQuery validation needs two clicks to activate?

I am experiencing an issue with a comments form that has 2 fields: Author and Message. Upon clicking the submit button, the validation does not trigger initially. However, if I click the submit button again, then the validation works as expected. Any tho ...

jqueryasp.nethtmlajaxjquery-ui

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

javascriptcssnode.jsexpressroutes

Are you looking to test your website's performance under limited bandwidth conditions

Similar Query: How can I test a website for low bandwidth? Would it be possible to mimic a slow internet connection to test my website's performance? I need to simulate lower speed conditions in order to observe how the site behaves. ...

jqueryhtmlcss

Is it possible for Websockets to receive data from Ajax requests?

I am currently working on creating a PHP and HTML5 websocket chat system. In this setup, one end will be a socket while the other end will be AJAX. Is it possible for PHP's socket_recv() function to receive data from sources like AJAX, MySQL, or any o ...

phpjqueryajaxhtmlwebsocket

Attempting to utilize a Jquery Ajax post method to retrieve information from my specified URL and display it within my HTML Div element

Seeking assistance in fetching real-time data using a jQuery Ajax Post method. My experience lies mainly in SQL and C#, so coding in this language is relatively new to me. I was advised to use this script, which seemed straightforward. However, despite my ...

jqueryhtmlajaxasp.net-ajax

Having difficulty deleting a checkbox element using JavaScript

My goal is to have a feature where users can effortlessly add or remove checkbox div elements as needed. The code I have written successfully adds and resets checkboxes, but I am encountering an issue when trying to remove them. I am struggling to identif ...

javascriptjqueryhtml

Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line. Here's how they look at the moment: Here's the preferred ali ...

htmlcsstext-alignment

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...

javascriptjqueryhtml

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Currently, I am in the process of working on a website that has opted for the adaptive approach, using separate mobile and desktop templates instead of responsive design. Despite this choice, Bootstrap is still being utilized on these templates, loading al ...

csstwitter-bootstrapsassbootstrap-sass

Loading animation reminiscent of a whirlpool, similar to the movement

In my quest for the perfect animation, I have scoured far and wide. Unfortunately, the one I found at http://jsfiddle.net/pedox/yed68/embedded/result/ is created using css, which many browsers do not yet support fully. I also explored , but found it to be ...

javascriptajaxhtmlloader

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

cssreactjsmaterial-uidatagridhorizontal-scrolling

What steps can be taken to turn this html code and css into a mobile application?

I have begun working on my HTML and CSS but need some guidance to create a mobile app without needing to resize it when accessed through the web. Additionally, I would like to make it responsive in CSS. Can you provide me with the necessary code? @c ...

htmlcss

How can I retrieve the value of a <span> element for a MySQL star rating system?

Source: GitHub Dobtco starrr JS plugin Implementing this plugin to allow users to evaluate a company in various categories and store the feedback in a MySQL database. Enhancement: I have customized the javascript file to enable the use of star ratings fo ...

javascriptphphtmlmysqltwitter-bootstrap

Tips for designing scrollable overlay content:

I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...

javascripthtmlcssoverlay

"Enhance Your Slide Up/Down Menu with a Unique Hover Effect in jQuery

HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation_desktop"> <div class="button_desktop_01">1.0 Main Menu <div class="SlideItem ...

jqueryhtmlcss

Can you direct me to resources on the internet that provide information about support for 12 Bit color depth?

I am curious to know when the w3specs will support colors in 12 bits instead of the current 8-bit format used for webcolors like sRGB (#FFFFFF or rgba(255,0,0,100). I wonder if there will ever be a new standard called 12-Bit sRGB where colors can be defin ...

csscolorsphotocolor-depthsrgb