Afficher une div en premier plan

Bonjour, sur ma page j'ai des div en display: none; et des liens en oneclick="display: block;" pour afficher les div cachés. Les div en questions on toutes la même class="ma-div".
J'aimerais que la dernière div cliquée soit toujours en premier plan peu importe dans quel ordre on les ouvre. J'ai essayer de bidouiller avec z-index mais ça ne fonctionne pas.

Jean-Pierre-Bruneau a écrit :
Impossible puisqu'ils ont le même nom (ID)

elles ont toutes la meme class mais egalement un id unique, du coup c'est possible ?

Bonjour Fogiel,
Tu peux nous monter le code html + CSS + Javascript

voici deux de mes div cachées:

<div class="jobs-windows" id="Just-Dance-Jobs" style=" display: none">
	<div class="job-haut">
		<div class="job-nom"><p>Premiere fenetre</p></div>
		<div class="job-fermer"><button onclick="document.getElementById('Just-Dance-Jobs').style.display='none';">x</button></div>
	</div>
</div>
  <div class="jobs-windows" id="Just-Out-Jobs" style=" display: none">
	<div class="job-haut">
		<div class="job-nom"><p>Deuxieme fenetre</p></div>
		<div class="job-fermer"><button onclick="document.getElementById('Just-Out-Jobs').style.display='none';">x</button></div>
	</div>
</div>

L'endroit ou le les fais apparaitre:

<table>
<tr>
<td><img src="images/iopm.png" /></td>
<td class="b2" style="text-align: left;"><a onclick="document.getElementById('Just-Dance-Jobs').style.display='block';">Just-Dance</a></td>
<td class="b2">84</td>
<td class="b2"><img src="images/feu.png" /></td>
</tr>
  <tr>
<td><img src="images/iopf.png" /></td>
<td class="b2" style="text-align: left;"><a onclick="document.getElementById('Just-Out-Jobs').style.display='block';">Just-Out</a></td>
<td class="b2">92</td>
<td class="b2"><img src="images/eau.png" /></td>
</tr>
  </table>

le css:

.jobs-windows
{
	position: absolute;
	margin-top: 5%;
	margin-left: 32%;
	height: auto;
	width: 690px;
	background-color: #d5cfaa;
	border: 5px solid white;
	border-radius: 20px 20px 20px 20px;
}

.job-haut
{
	height: 45px;
	width: 100%;
	border-radius: 20px 20px 0px 0px;
	background-color: blue;
}

.job-nom
{
	float: left;
	height: 100%;
	width: 92%;
	border-radius: 20px 0px 0px 0px;
}

.job-nom p
{
	margin-top: 1%;
	margin-left: 1%;
	color: white;
	font-size: 25px;
	font-family: Verdana, sans-serif;
	height: 50%;
	border-radius: 20px 20px 0px 0px;
}

.job-fermer
{
	height: 100%;
	width: 8%;
	border-radius: 0px 20px 0px 0px;
	float: right;
}

.job-fermer button
{
	margin-top: 17%;
	margin-left: 40%;
	height: 23px;
	width: 23px;
	background-color: red;
	border-top: 2px solid #ff9f65;
	border-right: 2px solid #b34300;
	border-bottom: 2px solid #b34300;
	border-left: 2px solid #ff9f65;
	color: white;
	font-family: Verdana;
	font-weight: 800;
	cursor: pointer;
}

si le clique sur Just-Out puis sur Just-Dance, la fenetre Just-Dance s'ouvre mais en dessous

En attendant une réponse plus avisé, tu peut essayer avec focus() et tabindex="0" , https://codepen.io/gc-nomade/pen/BaaeaZd . mais c'est surement pas la meilleure façon de faire.

en regle génerale on ajoute/enleve une class plutôt que d'appliquer des style directement via javascript
Modifié par gcyrillus (23 Nov 2019 - 23:29)