j'ai une form dans une div dont les css sont en position absolute avec
un z-index à 5.
dans Chrome, outils de dev, je vois que "poition: absolute" est barré
avec un trinagle jaune ayant un point d'exclamation.
cette div n'apparaît pas en "overlay" au dessus de la div qui vient
ensuite dans le flux html, pourquoi.
grosso modo le (x)html :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
...
<body style="direction: ltr;">
<div id="header">
<img id="search_button" src="Images/loupe.png" alt="" />
<h2>Carnet d'adresses d'Yvon Thoraval</h2>
</div>
<div id="search_div">
<form id="search_form" name="search_form" action="search.php"
method="post">
...
<div id="navbartop">
<ul id="navlisttop">
<li>
<a href="javascript:void(0);" class="current">Recherche</a>
...
donc la div "search_div" apparaît entre les divs "header" et "navbartop"
(elle pous "navbartop" vers le bas de la fenêtr e)
alors que je souhaiterait avoir "navbartop" qui ne bouge pas et
"search_div" au dessus, ce que j'appelle en overlay, avec son z-index à 5.
le css :
#search_div {
positon:absolute;
top:60px;
left:0px;
le js qui permet de voir/cacher cette div :
window.onload=setup;
function setup(){
document.getElementById('search_div').style.display='none';
document.getElementById('search_button').onclick=search_switch;
}
function search_switch(){
visibilty=document.getElementById('search_div').style.display;
document.getElementById('search_div').style.display=(visibilty=='none')?
'inline' : 'none';
}
le 'search_button' est dans la div "header".
c'est mon carnet d'adresses donc ce n'est pas en ligne.