Display the text above overlapping div elements

I need a design where one div overlaps another, but the text inside the overlapping div must still be visible. 

<div class='box1'>
  <div class='sendAbove'>
    This message should remain visible in this div
  </div>
</div>

<div class='box2'>

</div>

CSS

.box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}

https://jsfiddle.net/sriv87/Lcoxrgpw/9/

Edit: Updated fiddle https://jsfiddle.net/sriv87/c8eh5fcs/

https://i.stack.imgur.com/oeAx3.png

htmlcss

Answer №1

Sure thing, I have made the necessary edits based on your updated requirements. Please review them below.

.callout {
  position: relative;
  background: #ffffff;
  border: 1px solid #f00;
  width: 200px;
}

.callout:after,
.callout:before {
  position: absolute;
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
}

.callout:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: white;
  border-width: 10px;
  margin-top: -10px;
}

.callout:before {
  border-color: rgba(255, 0, 0, 0);
  border-left-color: #f00;
  border-width: 11px;
  margin-top: -11px;
}
<div class="callout">
  <p>Message here</p>
</div>

Answer №2

It seems that the current layout will not function as expected. This is because the parent element of .sendAbove has a position set to absolute, causing its content to always be contained within the parent element. Changing it to either absolute or relative will not alter this behavior.

To resolve this issue, you should place the .sendAbove element outside of the .box1 element. Ensure that both elements have identical positions, heights, and widths.

.wrapper {
  position: relative;  
}

.box1, .sendAbove {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
}

.box1 {
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}
<div class="wrapper">
<div class='box1'>
</div>

<div class='sendAbove'>
    This is a message I want to be visible in this div
  </div>

<div class='box2'>

</div>
</div>

Answer №3

To reveal the text beneath, simply adjust the background color settings in .box2. The level of visibility can be controlled by the 'a' value in rgba, ranging from 0 to 1. For example, a value of 0.1 will result in high transparency, while 0.9 will provide minimal transparency.

 .box2 {
      width: 150px;
      height: 150px;
      position: relative;
      top: 70px;
      left: 70px;
      **background-color: rgba(255,255,255,0);**
      border: dashed red 2px;
      z-index: 7;

}

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

What's the best way to position menu items vertically in a navbar?

I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...

htmlcsstwitter-bootstrap-3

What steps can I take to prevent the odd gaps from appearing in my horizontal flexbox gallery?

Take a look at this code: .gallery { display: flex; overflow-x: auto; resize: both; background-color: rgb(200, 200, 200); padding: 10px; height: 200px; } .item { display: flex; flex: 0 0 auto; max-width: 100%; } .item img { max-w ...

css

Are you familiar with PowerShell and its innovative modular GUI capabilities?

One challenge I face is assisting clients who constantly monitor the performance of their servers, services, and network. Utilizing PowerShell, I envisioned creating a unified GUI interface for all these tasks, including remote log tailing capabilities. B ...

c#htmlpowershelluser-interface

Strategies for quickly landing in top Google search results

I run a website for classified ads... Whenever users post a new ad, it gets automatically included in our dynamic sitemap (xml). Our sitemaps were submitted to Google via Webmaster Tools about two months ago. While some of the ads are indexed, it is tak ...

phphtmlxmlsearchseo

Exploring Django's view field for efficient data rendering

Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...

htmlcssdjangoweb

Tips for dynamically styling a Styled Component with all the CSS housed in an external file

My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this app ...

javascripthtmlcssreactjsstyled-components

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

How can we link identical pages to distinct sets of data in the backend and ensure they operate effectively with their respective data?

I'm working on a project where I have a dynamic table on the front-end that gets its data from a MySQL database connected using PHP. Each row in the table has action buttons, with only a delete option for now. The styling is pretty basic as shown belo ...

phphtmlmysql

Employing PHP to iterate through and separate items into disparate divs

For my project, I need to loop through 12 items and separate them into different divs. Specifically, I want to group 0 and 1 together in one div, have 2 in its own div, 3 and 4 in another div, 5 in a separate div, and so on. <!-- Grouping 0 and 1 --> ...

phphtml

How to integrate Phpfox::getBlock into a template file within PHPFOX

Today, I attempted to integrate Phpfox::getBlock into the template file within PHPfox but encountered some issues. Can someone take a look and identify where the problem lies? I am looking to include a PHP block: core.template-copyright into the followi ...

phphtmlphpfox

Storing HTML labels in an array using a jQuery selector in JavaScript can be a

My code snippet in HTML looks like this: <p style:"text-align:center"><label>Question1</label></p> <p style:"text-align:center"><label>Question2</label></p> <p style:"text-align:center"><label>Qu ...

javascriptjqueryhtmljquery-selectors

Using Selenium to locate and identify content based on HTML attribute names

To confirm the presence of specific HTML content or items on a page using known unique identifiers, I am seeking to utilize Selenium (or a similar framework). While I have the ability to mark HTML tags with an attribute, I sometimes encounter situations w ...

htmlseleniumautomated-testsintegration-testing

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

javascripthtml

How can you determine the HTML element where a mouse click took place?

Is it possible in JavaScript to identify the HTML element where a mouse click occurs without having an event listener attached to the elements? Essentially, I want to be able to capture the mouse click event and determine the specific element on the page ...

javascripthtmleventsdom

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

javascriptjqueryhtml

``on click of the back button of the browser, automatically submit the form

I'm facing a specific issue that I need help with. I have created a form with a hidden value, and I want it to be submitted when the user clicks the browser's back button. Although I've managed to control the backspace key, I haven't be ...

javascriptphpjqueryhtmlforms

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

javascripthtmljquery

Upon clicking a link, the webpage will automatically scroll to a specific point

As I work on creating my website, I have come across a specific need: I currently have a menubar with a dropdown menu. Inside this dropdown, there are 4 different options. These options are all located on the same page. What I would like to achieve is tha ...

htmlwebanchorhref

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...

htmlcsstwitter-bootstrapresponsive

Getting the ng-model value from a Directive's template and passing it to a different HTML file

When working with my name directive, I am unable to retrieve the value of ng-model from the template-url. team-two.html <form name="userForm" novalidate> <div name-directive></div> </form> <pre>{{userForm.firstname}}< ...

javascripthtmlangularjs