StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I recommend you remove all the z-indexes from your css. Then create a class called '.veryHighZ-Index, for example, and add this class to the clicked image & remove the class from the previously clicked image...</p> <p>I modified your code a little bit, but this code here should work.</p> <pre><code><html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $(document).ready(function () { // #pictures div catches all divs inside the #pictures $('#pictures div').click(function () { $('.veryhighz-index').removeClass('veryhighz-index'); $(this).addClass('veryhighz-index'); }); }); </script> <style type="text/css"> #pictures { width: 650px; height: 300px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; background: lime; position: relative; overflow: hidden; } #top { top: 0; left: 0; position: absolute; } #center { top: 60px; left: 200px; position: absolute; } #bottom { top: 150px; left: 400px; position: absolute; } .top, .center, .bottom { width: 300px; height: 300px; border: 2px solid red; } .top {background: red;} .center {background: yellow;} .bottom {background: blue;} .veryhighz-index { z-index: 999999; } </style> </head> <body> <div id="pictures"> <div id="top" class="top"></div> <div id="center" class="center"></div> <div id="bottom" class="bottom"></div> </div> </body> </html> </code></pre> <p>In short, add the following code to your css</p> <pre><code> .veryhighz-index { z-index: 999999; } </code></pre> <p>and this code to the javascript functions</p> <pre><code> // #pictures img catches all images inside the #pictures $('#pictures img').click(function () { $('.veryhighz-index').removeClass('veryhighz-index'); $(this).addClass('veryhighz-index'); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload