What is the most effective way to create overlapping divs using CSS?

I encountered an issue that requires me to create something similar to the following:

I'm having trouble with CSS

Furthermore, I want all the divs to surface to the top when clicked.

.boxwrap{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

.box{
  width: 100px;
  height: 100px;
}

#box1{
  margin-left: -100px;
  background-color: red;
}

#box2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
}

#box3{
  margin-left: 100px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

To implement the z-index, follow these steps:

.container{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

.item{
  width: 100px;
  height: 100px;
}

#item1{
  margin-left: -100px;
  background-color: red;
  position: relative;
  z-index: 2;
}

#item2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  position: relative;
  z-index: 1;
}

#item3{
  margin-left: 100px;
  background-color: green;
  position: relative;
  z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="container">
  <div class="item" id="item1">
  
  </div>
  <div class="item" id="item2">
  
  </div>
  <div class="item" id="item3">
  
  </div>
</div>

Note: The z-index property only applies to positioned elements.

Answer №2

To ensure the proper functioning, it is essential to consistently increase the z-index value with each .click() on any .box. This approach prevents any overlapping changes of the others:

var z = 2; /* should be at least 2, making it 1 level above if clicked on the black one initially */

$('.box').click(function(){
  $(this).css('z-index', z++);
});
.boxwrap {
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

.box {
  width: 100px;
  height: 100px;
  position: relative; /* or "absolute", "fixed" */
}

#box1 {
  margin-left: -100px;
  background-color: red;
  z-index: 1; /* 1 more than the default one */
}

#box2 {
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  /* make sure z-index isn't negative to enable clicking, set it higher than the other two */
}

#box3 {
  margin-left: 100px;
  background-color: green;
  z-index: 1; /* same as above */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

Answer №3

.boxwrap{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

.box{
  width: 100px;
  height: 100px;
}

#box1{
  margin-left: -100px;
  background-color: red;
display:inline-block
}

#box2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
}

#box3{
  margin-left: 100px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

Answer №4

Adjust the position of .box

.box{
  width: 100px;
  height: 100px;
  position: relative;
}

Add z-index property to control layering of elements:

#box1{
  margin-left: -100px;
  background-color: red;
  z-index: 1;
}

#box2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  z-index: 0;
}

#box3{
  margin-left: 100px;
  background-color: green;
  z-index: 1;
}

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 steps can I take to ensure that my initial Ajax Get request is completed before proceeding with the next one?

Having two methods that return promises is not enough. I am attempting to make the second method execute only after the first one has obtained and manipulated data, but I have struggled to find a solution despite others asking this question before me. Here ...

javascriptjqueryajax

The code is functioning well on Chrome, Firefox, and Microsoft Edge; however, it seems to encounter issues when running on Safari

I've been working on a website for my client that works perfectly fine in Chrome, Firefox, Microsoft Edge, and even Internet Explorer :P. However, I'm facing some issues with Safari. Here's a snippet of the code I used: <html> <hea ...

javascripthtmlcssgoogle-chromefirefox

What is the process for implementing a custom error when compiling Sass code with node-sass?

When using node-sass to compile my sass code, I am curious about the possibilities during the compilation process. To clarify, I am interested in creating custom rules and generating specific errors under certain conditions while compiling. ...

javascriptnode.jssassnode-sass

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

Here is the code snippet I'm working with: this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => { this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height( ...

javascriptangulartypescriptionic3

Kohana ajax causing removal of JQuery Data attributes

Currently, I am developing an application where jquery data is used to pass variables to HTML elements. It has been successful in one part of the site when the data attributes are added to a tr tag. The following code works: <tr class="js-instructions ...

javascriptjqueryhtmlajaxkohana

Why is it necessary to use 'this.' to reference a function inside a Component in React?

class First extends React.Component{ handleClick(){ alert('handle click'); } render(){ return <div> <button onClick={this.handleClick}>click</button> </div>; } } Explo ...

javascriptnode.jsreactjsreact-native

Starting from TypeScript version 5.6, `Buffer` cannot be categorized as either `ArrayBufferView` or `Uint8Array | DataView`

Struggling to make the transition to TypeScript 5.6 Beta, I am encountering these error messages within the node_modules directory. Without making any other modifications, how can I resolve these errors? node_modules/@types/node/buffer.d.ts:632:19 - error ...

javascriptnode.jstypescriptupgrade

All submenus will be shown simultaneously

All sub menus are displayed at once when any button that triggers the event is clicked. For a live demonstration, click here: https://jsfiddle.net/saidmontiel/734szqLg/9/ I'm interested in having only one submenu appear at a time. I am aware that ...

javascriptjqueryhtmlcss

The rectangular shape extending beyond the boundaries of the canvas

I'm currently working on creating a rectangle within a canvas element. I've set the width of the div to match the width of the rectangle, but unfortunately, the rectangle is extending beyond the left side of the canvas container. My goal is to co ...

javascripthtmlcssreactjscanvas

Dealing with undefined properties in Javascript can cause errors

[ { dateTime: '2016-03-30 05:55:53', value: '4.0' }, { dateTime: '2016-03-30 05:55:55', value: '17.0' }, { dateTime: '2016-03-30 05:55:57', value: '17.0' }, { dateTime: '2016-03-30 06:0 ...

javascriptarraysjsonejs

The <script> element failed to close correctly

Within my default.jspx file, which serves as the foundational layout for the page, I am attempting to import several jQuery libraries. The code snippet looks like this: <head> ... <spring:url value="/resources/js/lib/jquery-1.9.1.min.js" ...

javascriptjqueryjspspring-mvcspring-roo

Minimize the size of your compiled JavaScript with GWT

Recently, I've noticed that the size of my compiled JavaScript is increasing more quickly than I anticipated. Just a few additional lines of Java code in my project can result in a significant increase in script size by several Kbs. Currently, my com ...

javascriptgwt

Find the current elapsed time using Wavesurfer in real time

I am currently utilizing the waveSurfer library created by katspaugh for playing audio files. In order to display 'elapsed time / total time', I have written code in the following manner: waveSurfer.on('play', function() { $scope.g ...

javascriptangularjshtml5-audio

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Attempting to update a Task using the Graph API from an angular2 typescript app. Here is an example of my request - Request URL:https://graph.microsoft.com/beta/tasks/_1EKXXuN1UGInJ9yVHAjIpYAKuC2 Request Method:PATCH Request Body: { "createdBy":"f16 ...

javascriptasp.net.netajaxmicrosoft-graph-api

Access AJAX Submitted Data on a Classic ASP Page

My current task involves dynamically generating a URL based on a clicked link, extracting variables from the URL, and using them to make an AJAX post request to a classic ASP page. The goal is to insert these values into an SQL database. This process is tr ...

jqueryajaxpostasp-classicrequest.form

Enhancing django signup form with personalized helper texts using widget_tweaks

I am running into an issue with the helper text for the Password field on my signup page using Django's default signup form. Despite my efforts, I can't seem to resolve it. Below is the body of my signup.html: <body class="text-center"> ...

htmlcssdjangodjango-widget-tweaks

Inconsistent Accuracy of React Countdown Timer

Hello everyone! I'm new to programming and I'm currently working on creating a countdown timer that goes from 3 to 0. The issue I'm facing is that the timer counts down too quickly when rendered on the screen. I've tried adjusting the i ...

javascriptreactjs

Can a website built with VueJs be successfully deployed on Wordpress for a client?

Is it possible to launch a VueJs only client website on WordPress without using templates? I'm curious if this approach is feasible. If so, do you have any recommended tutorials for achieving this? If not, what alternative solution would you suggest? ...

javascriptwordpressvue.jsdeploymentproduction

Having trouble with displaying the logo on the navigation bar (using bootstrap and django)?

Hello, I am struggling to include a logo in my navbar and it's not being displayed. Despite researching similar queries from others, I still can't figure out why the image won't show up. I'm uncertain whether the issue lies within my co ...

htmlcssbootstrap-5

Discover the dynamic method for determining the value of a nested array based on a specific condition

Currently, I am delving into the world of nested arrays and attempting to locate a specific value within the array based on a condition. The data returned by the API is structured in the following format: data= { "ch_Id": "1234", "title": "Title" ...

javascriptarraysangulartypescript