使 div 聚焦并更改 z-index

Question

So basically we have a concept picture: http://imgur.com/a/Z38Fy

Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.

Is this possible using jQuery and javascript?

Answer 1

Is this what you are looking for?

Set the z-index when click on a div, and set the z-index of the others to something lower

 $("div").click(function() { $("div").not(this).css("z-index", "1") $(this).css("z-index", "2") })

 div { position: absolute; height: 100px; width: 100px; border: 1px solid #000; background-color:white; } .one {} .two { top: 40px; left: 100px; } .three { top: 70px; left: 40px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div>

Answer 2

A quick example

 $(".window").on("click", function() { $(".window").css("z-index", 0); $(this).css("z-index", 1); });

 .window { width: 250px; height: 250px; } .window:nth-child(1) { background-color: lightblue; position: absolute; left: 20px; top: 20px; } .window:nth-child(2) { background-color: purple; position: absolute; left: 100px; top: 60px; } .window:nth-child(3) { background-color: darkgreen; position: absolute; left: 180px; top: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="window">W1</div> <div class="window">W2</div> <div class="window">W3</div> </div>

Answer 3

As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.

I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".

See modified Carsten Løvbo Andersen example:

 .container { position: absolute; height: 100px; width: 100px; border: 1px solid #000; background-color: white; z-index: 0; } .container:focus { z-index: 1; } .one {} .two { top: 40px; left: 100px; } .three { top: 70px; left: 40px; }

 <div class="container one" tabIndex="0">1</div> <div class="container two" tabIndex="0">2</div> <div class="container three" tabIndex="0">3</div>