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

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

htmlcsssass

What is the reason for padding influencing the overall dimensions?

The result I achieved was unexpected. After realizing that the text was positioned above the green markers, I decided to add some internal padding to the three pink containers. To my surprise and disappointment, when I made this adjustment, it ended up lo ...

css

Personalizing MaterialUI's autocomplete functionality

Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...

javascripthtmlcssreactjsmaterial-ui

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

I'm currently working on application development using ReactJs and Material UI. When I try to open the application in Mozilla Firefox, an error message pops up saying "TypeError: CSS2Properties doesn't have an indexed property setter for ' ...

cssreactjscross-browsermaterial-ui

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

htmlcssmargin

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver

Yeoman webapp error: Issue with incorrect CSS path in subfolder

I have been using the yeoman webapp generator (0.5.0) and my app directory is structured like this: app/ ├── dir1 │ └── index.html ├── favicon.ico ├── images ├── index.html ├── robots.txt ├── scripts │ └ ...

htmlcssweb-applicationsgruntjsyeoman

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascripthtmlcss

What are the steps to achieve such a design?

Can you show me how to create a single layout using HTML and CSS? I am struggling with splitting the screen properly. Could you provide a simple example, maybe on jsfiddle? https://i.stack.imgur.com/d2rbn.jpg Thank you in advance! EDIT: I have added a ...

htmlcsslayout

Enable vertical scrolling on the second row of a table while keeping the first row fixed as the table header (CSS)

While embedding the Ace Editor in a Chrome popup window, I encountered a challenge. My goal was to keep the first row of text always visible at the top while allowing the rest of the Editor to fill the screen. However, there is an issue with a vertical scr ...

javascripthtmlcssace-editor

Troubleshooting issues with browser scrollbars in a Silverlight application (HTML)

I am currently working on a simple silverlight application and I need to incorporate web browser scroll bars into it (scroll bars should not be inside my silverlight app). This is the HTML code I have: <style type="text/css"> html, body { heigh ...

htmlcsssilverlight

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...

javascripthtmlcsscss-grid

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

htmlcsshtml-tablescrollable

Working with jQuery, CSS, and functions to modify the current tag's class

Let's keep it brief and straightforward: Here is my HTML <div id="headerVideoControls" class="overlayElement"> <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> </div> Edited ...

javascriptjqueryhtmlcssaddclass

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this? this.cy = cytoscape({ con ...

cssangulartypescriptclasscytoscape.js

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

javascriptjquerycss

How to Keep Images Within Table Borders From Overlapping?

I am in the process of experimenting with creating a newsletter and have developed a template. I am very new to design and have created a table of album releases that is not fitting within the border I established. How can I resolve this issue? The code s ...

htmlcssresponsive-design