보내기 HTML5

Question

내가 HTML에 달성하고자 다음과 같은 사용 사례를 데에 기능을 백업 할 기본적으로 내가 minic에 Arrange --> Order --> Send to back의 기능을 시도하고있다

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

Google Presentation

나는 z-index을 시도했지만 성공하지 못했습니다. 나는 blue div transparent의 겹쳐진 부분과 함께 background-gradient을 사용할 수 있습니다.하지만 피하려고하는 일부 계산을 불러올 것입니다.

HTML로 작성하는 방법은 무엇입니까?
도움을 주시면 감사하겠습니다.

참고 : 모든 div 요소 position: absolute
업데이트로 배치됩니다 :red div 거짓말을 blue div 위의 z-index로하는 이상 blue div입니다. red div을 선택하면 아래와 같이 표시됩니다 (테두리가 강조 표시된 상태).

는 지금은 red div와 overlapes 그것의 일부가 나타나지 않습니다 blue div을 (분명 그 z-index 때문에 적은이다)를 선택하면하지만 난 select.it 때 표시하기 위해 border를 원한다.

Answer 1

당신이 코멘트를했기 때문에, 당신이 필요로하는 것은 이것입니다. 또한 class을 div에 전화 해주세요.

Final Demo

---

나는 조용히 당신의 질문을 받고 있지 않다, 그러나 클릭하면 당신이 이런 식으로 할 수있는 것보다, 다른 위의 요소를 가지고 싶어 가정

Demo

설명 :

여기서 무엇을하는지는 z-index을 01에 적용하는 것입니다.jQuery를 사용하여 클릭합니다.

Demo 3 (업데이트 된 바와 같이 귀하의 질문에)

---

현재 선택된 div

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

Demo 2

코드 참조 표시 border 사용 :

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