Pair of div elements stacking order

In this scenario, there are two div blocks with different z-index values. The first block has a z-index of 0, while the second block has a z-index of -1. I am looking to display the text on top of everything within the block that has a z-index of -1. I have already applied the style cursor: pointer to the text.

.first-block image as pizza {
  display: inline-block;
  position: relative;
  z-index: 700;
}

#second block when circle has some text {
  position: absolute;
  top: -15%;
  right: -20%;
  z-index: -1;
}

#text div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  display: inline-block;
}

Answer №1

If I comprehend correctly what you're asking for, it seems like you're attempting to achieve something similar. If you provide us with the HTML and CSS code in your question, we would be able to assist you more effectively! :)

/*using image as pizza*/
.first-block { 
  display: inline-block;
  position: relative;
  z-index: 700;
}

/*style for circle text block*/
#second { 
  position: absolute;
  top: -15%;
  right: -20%;
}

/*text div*/
#text { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  display: inline-block;
  z-index: 701; /*Add a higher z-index than the pizza*/
}

UPDATE:

<div class="first-block">image of pizza underneath the text but above the circle.<div>
<div id="second"> <!--This is the circle where the text is placed.-->
  <div id="text">
   SOME TEXT THAT APPEARS OVER THE PIZZA IMAGE.
  </div>
<div>

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

Attempting to conceal my default drop-down menu

I need to find a way to hide my drop down menu by default, as it currently shows up automatically. The drop down menu in question is under "My Account". This is the HTML code I'm working with: <li class="hoverli"> <a href="/customer/ac ...

Tips for opening a local HTML file in Internet Explorer

Is there a way to make an HTML file saved on the desktop open in Internet Explorer instead of Chrome as the default browser? Alternatively, is it possible to set Microsoft Word hyperlinks to open website links in Internet Explorer? Thank you! ...

Tips for accessing child elements of a select tag after dynamically loading option tags using ajax

Greetings! Here is the select tag I have in my HTML: <select class="form-control city-select"></select> Below is the script that loads options into the select tag using a POST method: $.post('../select-city.php',{id: id_pro ...

PNG can only be adjusted to a smaller size using IMG-Responsive, as opposed to scaling from small to large

I'm facing an issue when trying to adjust the size of a PNG image with a transparent background that has a width of 279 pixels and height of 432 pixels, using the img-responsive class in Bootstrap3. The Issue: Every time I attempt to upload the pn ...

Responsive div that reacts to scrolling

I am looking for a div that can dynamically change its position as I scroll up or down the page. For example, it could start 30px from the top but then move to 100px as I scroll down further. This div will be located on the right-hand side of my page, clo ...

Angular's NGX Spinner is efficiently blocking the entire page

I'm currently incorporating ngx-spinner into my Angular application, but I'm running into an issue where it's loading on the entire page instead of just a specific area. Below is the code that I'm using: <p> Hello name </p> ...

The jQuery code continues to loop endlessly

My current script includes a fadeIn effect on a div when the user scrolls 200px from the top, along with custom circle animations. While it works, I admit it's not the most elegant solution as I had to piece together different scripts to make it funct ...

"Customize your footer with dynamic content at the bottom of the

I am seeking a logical review of a partial solution that I am not satisfied with. There is a table on my page created using DataTables, so the dynamic content means that the height and width of the table can vary. The table is wrapped in three div elements ...

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

Switch picture when hovering over button image

Looking for a solution where I have 2 images - one inactive and the other active. I want the inactive part of the image to change to active when someone hovers over it. Here are the pictures: I was able to achieve this using mapster, but it's not res ...

Leveraging CSS exclusively within FXML

As a web developer focusing on Java and currently diving into FXML, I am intrigued by the versatility in terms of positioning and styling that panes offer. However, having a strong background in CSS, I can't help but wonder if exclusively using CSS in ...

Turn the image inside the div with the nth-child selector into a clickable link

I'm currently facing a challenge on my Squarespace website where I need to add individual links to various images using jQuery. The issue is that these images do not have a shared class, and unfortunately, I am limited to adding custom CSS or JavaScri ...

Is it possible to place a div and a heading side by side within the same line?

Is there a way to align a div and header on the same line? Currently, the red div is displaying below the text. Thank you for your help! .underlined { border-bottom: 1px dotted #000; text-decoration:none; } .block { height:15px; background-color: #ff505 ...

Personalize the controls for spinning arrows

I am interested in learning how to personalize the appearance of the arrows on a spin box. input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button !important; opac ...

How can the object currently being dragged be chosen using JQueryUI Draggable?

Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...

Exploring potential methods for generating a PDF invoice in PHP and CodeIgniter by utilizing HTML elements

Greetings everyone, I have encountered a common question on stackoverflow. I am currently working on an HTML invoice template similar to the one showcased in this demo page. My goal is to create a PDF file of the invoice when users click on a specific butt ...

Tips for adjusting the font size on the Google Maps mapType controller

Is it possible to adjust the font size of a Google Maps mapType controller using HTML or CSS? I've managed to change the size of the controller, but struggling with the font size. https://i.sstatic.net/1n9oU.png HTML: <div #map id="map" style=" ...

unable to decrease the gap between the rows of the table

I'm currently developing an application that involves a table with rows and columns, along with a checkbox container arranged as shown in the image below: https://i.stack.imgur.com/QoVrg.png One issue I'm facing is getting the letters A, B, C, ...

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...