HTML5 backward functionality

Question

I have the following use case that I want to achieve in HTML format

I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div. I have the option of "send to back" which sends the selected div to back of other div. If I apply this to blue div and select blue div it should look like below image

Mostly I'm trying to use the Arrange --> Order --> Send to back functions for Google Presentation

I tried z-index without success. I can use background-gradient with the overlapping part of the blue div transparent , but this will cause some calculations that I want to avoid.

How to achieve this in HTML?
Any help is appreciated.

Note. All div elements are placed in position: absolute
Update: the red div is above the blue div , since its z-index higher than the blue div . When a red div selected, it should look like this (with a border selected).

Now, if I select a blue div , the part of it that overlaps with the red div does not appear (obviously, since its z-index smaller), but I want its border appear when I select .it.

Answer 1

As you commented, I assume that you need this, also just call the class on the div you want to add.

Final demo

---

I do not understand your question very well, but I assume that you want to bring an element over another when it is clicked, than you can do it this way.

Demo

Explanation:

What is being done here is simply applying the z-index to the div that you click using jQuery.

Demo 3 (as your question updates)

---

Using border to mark the currently selected div

 $(".wrap div").click(function(){ $('.wrap div').removeAttr('style'); $(this).css({"z-index":"1", "border":"1px solid #000"}); }); 

Demo 2

Link to the code:

 $(".wrap div").click(function(){ $(this).css("z-index","1"); }); .wrap { position: relative; } .wrap div { position: absolute; height: 100px; width: 100px; } .wrap div:nth-of-type(1) { background: #f00; left: 10px; } .wrap div:nth-of-type(2) { background: #0f0; left: 80px; } <div class="wrap"> <div></div> <div></div> </div>