Having trouble displaying one DIV above another DIV

I'm having trouble getting an image in a DIV to display above text in another DIV. I can't figure out why it's only displaying below.

<div>
  <div style='z-index: 99; width: 160px; height: 120px; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75); margin-top: 16px; margin-left: 10px; border: 1px solid black;'>
    <img border=0 width=160 height=120 alt='W1A 1AA' src='upload/[W1A 1AA][221b].jpg'>
  </div>
  <div style='margin-top: 20px; padding-left: 190px; background: gray; position: relative; top: -130px;'>
    <h3 style='margin: 0px; color: white;'>Viewing as read-only an existing Inspection Survey</h3>
  </div>
  <div style='padding-left: 190px; background: lightgray; position: relative; top: -130px;'>
    <h1 style='margin: 0px;'>W1A 1AA</h1>
    <h2 style='margin: 0px;'>221b Baker Street</h2>
  </div>
</div>

This is the result:

I suspect the issue arises from using position: relative; to position the gray bars correctly. If that is indeed the problem, how can I achieve the desired outcome without relying on position: relative;?

css

Answer №1

To ensure your z-index works, make sure to add position relative to the div with the image.

<div>
  <div style='z-index: 99; width: 160px; height: 120px; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75); margin-top: 16px; margin-left: 10px; border: 1px solid black; position: relative;'>
    <img border=0 width=160 height=120 alt='W1A 1AA' src='http://lorempixel.com/400/200'>
  </div>
  <div style='margin-top: 20px; padding-left: 190px; background: gray; position: relative; top: -130px;'>
    <h3 style='margin: 0px; color: white;'>Viewing as read-only an existing Inspection Survey</h3>
  </div>
  <div style='padding-left: 190px; background: lightgray; position: relative; top: -130px;'>
    <h1 style='margin: 0px;'>W1A 1AA</h1>
    <h2 style='margin: 0px;'>221b Baker Street</h2>
  </div>
</div>

Answer №2

When using position:static, the z-index property will not have any effect. To make it work, simply include position:relative in the image container.

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

Hiding CheckBox items within a CheckBoxList control in ASP.NET

Currently, I am working with a CheckBoxList control that is bound to data and can potentially become very large. In order to manage this, I am implementing a filter mechanism. Here is my approach: foreach( ListItem item in this.UserRolesList.Items ) { ...

c#asp.netcsschecklistbox

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

Is there a way to stack multiple divs on top of each other in my HTML login page?

Below is the HTML code for my form: <div style="display:block; margin:0 auto;"> <h2>Welcome</h2> </div> <div id="box"> <div id="box2"> <p id="pid"><b>Em ...

htmlcss

The CSS dropdown menu is malfunctioning on Internet Explorer and Firefox

After searching for a solution and coming up empty-handed, I have decided to ask a question. The drop-down menu on my computer and other devices at home works perfectly in Chrome but not in Firefox and IE. #menu { position: absolute; left: 50%; bottom ...

htmlcssdrop-down-menu

Adhering to a modular approach to design

I am facing an issue with two modules: One is the .master-header and the other is the .header-nav The .header-nav is contained within the .master-header and consists of a simple navigation menu: <nav class="header-nav"> <ul> ...

cssmodulebem

endless cycle of scrolling for div tags

My goal is to incorporate a tweet scroller on I believe it uses the tweet-scroller from Unfortunately, this link seems broken as the demo is not functioning. I searched for an alternative solution and came across http://jsfiddle.net/doktormolle/4c5tt/ ...

javascriptjquerycssjquery-plugins

CSS: Centralizing a Div Element with Fluid Width

I've created a popup that appears in the center of the screen using: transform: translate(-50%, -50%); and position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the c ...

htmlcss

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

javascripthtmlcssangulartypescript

What is the best way to apply the background color from a parent div to a span element?

Is there a way to make the background color of the Reset Password section span the full width of the outer div and header section? html: <div class="forgot-inner"> <!--Forgot-header--> <div class="forgot-hea ...

htmlcss

Unable to understand the reason behind why the button is not being displayed

I'm having trouble with my quiz app. I have a button to submit answers and move on to the next question, but whenever I try to place it within the div that contains the quiz, the button disappears. Can someone please help me figure out what's wro ...

javascriptjqueryhtmlcss

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview

Is there a way to prevent a link from activating when I click on one of its internal elements?

Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if th ...

javascripthtmlcssreactjsnext.js

Creating a navbar that sticks to the top of the page

I've been working on some code to create a sticky navbar that remains fixed as I scroll down, but unfortunately, it's not working. I suspect the issue might lie in the CSS, as the HTML and javascript seem fine. Interestingly, this same code has w ...

javascripthtmlcssonscroll

What could be the reason for the lack of a border below the navigation bar in this code?

I am attempting to create a navigation bar with a simple thin border that becomes thicker when hovered over. Although I have written the code below, it seems to not be working as intended. How can I fix this issue? #top-menu ul li a { display: block ...

htmlcss

Images in Chrome are shivering when animated at unconventional positions

I am attempting to create a masking animation that reveals an image from its center. The animation is working well, but I have encountered a problem in Chrome where the revealed content shakes. Here is an example on jsfiddle: http://jsfiddle.net/BaKTN/ I ...

javascriptjquerycssgoogle-chromejquery-animate

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

javascripthtmlcss

You need to click the form submit image twice in order to make it work

Struggling to get a standard opt-in form to work with an image submit button. The script works fine with a regular submit button, but the image button requires two clicks initially and then one click after unless the page is refreshed. I believe there mig ...

javaphpcssformssubmit

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

presentLoading(message) { this.loading = this.loadingCtrl.create({ dismissOnPageChange: false, spinner:'hide', content:`<img class="load" src="assets/dual.gif" />`, }); this.loading.present(); } Hello there! I am working with the ...

htmlcssangularbootstrap-4ionic3