Les formulaires (partie 2) : Comment faire passer un div au dessus d'un select dans IE ? [Fait]

**Auteur** · 27/04/2013, 17h40

Comment faire passer un div au dessus d'un select dans IE ?

http://javascript.developpez.com/faq...put.div.select

Cette Q/R est désormais [Obsolète] en tout cas pour IE9 avec un DOCTYPE XHTML1.1

Exemple en CSS :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
<!--
div{
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid #FF0000;
        z-index: 10;
        top: 0;
        left: 0px;
}
-->
</style> 
 
</head>
 
<body>
<div> Antequam est Februario Februario Quo nascetur in in paludatus 
consulatu denique Quo Sortietur Quo absurdum sine et denique toto 
Proficiscetur sine non ante pervenire antequam non habebit est provinciam 
absurdum.
</div>
 
<div>
<select>
	<option>a</option>
	<option>b</option>
	<option>c</option>
	<option>d</option>
</select>
</div>
 
</body>
</html>

**NoSmoking** · 16/11/2013, 15h20

Pas de remarque, si ce n'est que je mettrais un doctype HTML5, mais il est vrai que cela date un peu quand même.

**Auteur** · 16/11/2013, 17h53

Si elle date, est-ce utile de mettre un doctype HTML 5 ? Cela donnerait l'impression de faire du vieux code avec de nouvelles normes

**NoSmoking** · 16/11/2013, 22h38

Le doctype HTML 5 ne pose aucun soucis même sous IE6 qui est dans ce cas en mode standard.
D'un autre coté il est vrai qu'actuellement une simple gestion des z-index est suffisante.
Pensons à ceux qui on encore pour leur intranet IE6

.

**Auteur** · 17/11/2013, 11h20

Comment présenterais-tu la chose ?

**NoSmoking** · 22/11/2013, 18h45

Ce problème ne se rencontre plus depuis IE7 qui gère cela correctement via le z-Index.
Cette Q/R est donc tout à fait adaptée à IE6, il en reste, ainsi que l'exemple associé mis par siddh.

On pourrait se contenter d'indiquer que cette Q/R est applicable à IE6 et que les versions suivantes de IE gère cela correctement.

On pourrait même ne changer que le titre.

Proposition :
----------------------------------------------------------------------------------------
Comment faire passer une div au dessus d'un select pour IE6 ?

Cette Q/R n'est applicable qu'au navigateur IExploreur pour ses versions 6 et antérieures.

Il suffit de mettre en place une <iframe> au même niveau que la <div>. Cela permet au contenu de celle ci d'apparaître au dessus du <select>.

La méthode ci-dessous permet de positionner l'iframe au niveau de la div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function putFrame() {
  var f = document.createElement("iframe"),
      d = document.getElementById("theDiv"),
      fStyle = f.style;
  // application du style sur l'IFRAME
  fStyle.position = "absolute";
  fStyle.width = d.offsetWidth + "px";
  fStyle.height = d.offsetHeight + "px";;
  fStyle.top = d.offsetTop + "px";
  fStyle.left = d.offsetLeft + "px";
  fStyle.zIndex = 1;
  document.body.appendChild(f);
}