28220 sujets

CSS et mise en forme, CSS3

Placer un bloc en positionnement absolute sous un bloc normale...

Rebonsoir,

Voilà je vous souhaiterais qu'un bloc (positionné par défaut et de type bloc) puisse s'afficher par dessus un autre, de type bloc aussi, dont le positionnement est absolu. Et c'est pas simple, parce que les blocs en position absolu sont toujours affiché au dessus de tout le reste par défaut. Et, bien qu'en ayant abusé de z-index, je n'ai pas réussi à faire tourner la roue dans l'autre sens.

Bon, là vous vous demandez peut-être pourquoi cette question. En fait c'est pour éviter que mon design se marche sur les pieds en cas de réduction de la taille de la fenêtre... et que rien ne va plus ! Smiley murf

Merci à vous !!

PS : promi, c'est ma dernière question... pour la soirée en tout cas Smiley confused
Bonsoir,

On l'a devine l'adresse du site ou le code concerné, à moins que ce soit une interro écrite sans copier sur son voisin. Smiley lol

Du peu que tu nous en dis, je penses qu'il y a des principes de conception à reprendre ("en ayant abusé de z-index", "éviter que mon design se marche sur les pieds en cas de réduction de la taille de la fenêtre", "(positionné par défaut et de type bloc) puisse s'afficher par dessus un autre, de type bloc aussi, dont le positionnement est absolu")). Smiley cligne
Zut, il serait donc démasqué alors... Smiley ohwell

Bon alors tant pis. Mais pour reprendre le problème, ce problème, voilà un petit exemple (qui, je l'espère, sera d'autant plus clair que le fameux code dont on parle).

Donc au niveau xHTML :

<p id="mouhaha">Bonsoir !</p>
<div id="z">ZZzzZzzzzZZZZzzZzzZZzz</div>


Et CSS :

p#mouhaha {
width: 30px;
border: 1px solid #000;
}
div#z {
position:absolute;
left: 50%;
top: 0;
width: 400px;
height: 144px;
margin-left: -200px; /* moitié de la largeur */
margin-top: 0; /* moitié de la hauteur */
}


Là je crois que c'est plus net. Donc comme vous pouvez le voir, si je m'amuse à réduire la fenêtre d'un navigateur affichant le code plus haut, le bloc div#z va finir par écraser l'autre nommé p#mouhaha. D'où le problème.
Modifié par tsing (29 Oct 2005 - 00:58)
Croyez-le bien, j'aurai préféré vous copier/coller la source du code que je réédite - après 1 an (c'est pas facile) de vacances Smiley smile - or le problème, c'est que ne s'agissant pas à un site perso mais plutôt de celui d'un un organisme, je ne saurai me permettre d'en publier le contenu. En fait ça ne serait pas très sérieux de ma part vous voyez Smiley sweatdrop . Surtout qu'avec mon ami big-google, on peut tout voir, tout entendre et tout savoir.

Bref, en tout cas j'ai réussi à trouver une astuce au problème : comme dans le bloc dont le positionnement est absolu j'ai opté pour un logo (je cois d'ailleurs que dans beaucoup de site le logo est fixé de cette facon), je me suis dis qu'il pourrait être utile d'en rendre le fond transparent (surtout grâce à la magie du png Smiley langue ), et en précisant dans le bloc occurrent un 
background-color: transparent;
Merci pour votre aide et bonne continuation Smiley biggrin . Et vivement le CSS 3 Smiley lol
Bonsoir,

Ahem.

Dans l'exemple que tu donnes ci-dessus, la démarche normale consiste simplement à remonter au premier-plan l'élément p#mouhaha à l'aide de z-index... ce qui nécessite évidement qu'il doit doté d'une position:relative : les éléments en flux ou flottant ne sont pas affecté par la propriété z-index.


Dans ta page réelle :
- tu as peut-être oublié ce position:relative si ton élément était en flux ou flottant.
- ou bien, si ton élément en positionné, les deux éléments appartiennent à deux contextes d'empilement différents, et c'est le z-index d'un des éléments parent du bloc à faire apparaître au premier plan qu'il faut modifier.
Sujet clos
Aller à