Send to back functionality in HTML5

Question

I'm having the following use case that I want to achieve in HTML

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

Basically I'm trying to minic the functionality of Arrange --> Order --> Send to back of Google Presentation

I did try z-index with no success. I can use background-gradient with the overlaped part of blue div transparent but that will invole some calculations which I want to avoid.

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

Note: All div elements are placed with position: absolute
Update: The red div lies above the blue div as its z-index is higher than blue div. When red div is selected it should look like below (with border highlighted).

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

Answer 1

As you've commented, I guess what you need is this, also, just call a class on a div which you want to stack up.

Final Demo

---

I am not getting your question quiet well, but I assume you want to bring an element above another when it is clicked, than you can do it this way

Demo

Explanation:

What am doing here is, am simply applying z-index on the div you click using jQuery.

Demo 3 (As you updated your question)

---

Using border to mark the current selected div

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

Demo 2

Code Reference :

$(".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>