Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Div en positionnement absolu
Auteur
louna
# 18 Mar 2010 - 11:27:20
Citer
5 Posts
 Bonjour,

Je pensais que si on place un div en position absolue sur une page où tous les autres div sont en positionnement flottant, il apparait au-dessus de tous les autres.
Dans mon cas, les div flottants se placent par rapport au div absolu (le div "actu"), alors que je voudrais au contraire qu'il se place par-dessus des autres. 

#actu {

position:absolute;

top:150px;

left:100px;

z-index:1;}



#global {

position:relative;

margin: 0 auto;

width: 1024px; 

z-index:0;}

	 

#left {

margin-top:20px;

float:left;

width:424px;

position:relative;}

	

#right {

float:left;

width:550px;}



#menu {

display:block;

width:207px;

float:left;}

	

.annonce {

width:550px;

float:left;

margin:0;

padding:0;}



.annonce-g {

width:385px;

float:left;

margin:5px 0px;}

	

.annonce-d {

width:150px;

float:left;}



#pied {

width:550px;

float:left;}


Merci de vos conseils, bonne journée smile
Modifié par Florent V. (19 Mar 2010 - 10:35)
^
Laurie-Anne
# 18 Mar 2010 - 11:41:48
Citer
Modérateur
5736 Posts
 Bonjour,

Un code CSS sans le code HTML auquel il se rapporte est très difficile à analyser et laisser part à une grande partie de supposition (l'ordre des div).

Pour ce qui est des positionnement, je te conseillerais de revoir les bases.
Non !
http://laurie-anne.bourdain.name 
^
Viva25
# 18 Mar 2010 - 11:42:15
Citer
83 Posts
 Salut,

Tu à un exemple à nous montrer ? pis le code HTML ?
Parceque je pense que float:left; et position:relative; sur le même élément c'est pas trop good !
Modifié par Viva25 (18 Mar 2010 - 11:42)
^
Corinne S.
# 18 Mar 2010 - 11:42:37
Citer
Modérateur
2502 Posts
 Bonjour,

Il semblerait que tu ne comprenne pas les implications et la nature exacte des différents positionnement.

Je ne saurais que trop te conseiller la lecture de ces quelques articles :
- Initiation au positionnement en CSS
- Initiation au positionnement CSS (partie 2)
Il n'est pas nécessaire d'espérer pour entreprendre, ni de réussir pour persévérer.
http://www.inseo.fr 
^
louna
# 18 Mar 2010 - 15:02:02
Citer
5 Posts
 Voici mon code html :
<body>

<div id="global">

      <div id="actu">le div qui doit apparaitre par-dessus tout le reste en sortant du flux</div>

	<div id="left">

    	    <div id="menu">menu</div>

        </div>

	<div id="right">

		<div class="annonce">

                     <div class="annonce-g">contenu</div>

		     <div class="annonce-d">contenu</div>

     	        </div>

         </div>	

	<div id="pied">pied de page</div>

</div>

</body>


J'ai relu les articles d'alsacreations au sujet des css, ce que je comprends c'est qu'un div est positionné en absolu par rapport au premier parent positionné, autrement dit dans mon cas, "global"? là, les autres éléments se positionnent par rapport à lui.... ou alors j'ai rien compris, ce qui est possible aussi lol
Modifié par Florent V. (19 Mar 2010 - 10:36)
^
sans gluten
# 18 Mar 2010 - 17:08:04
Citer
4 Posts
 Bonjour,

un petit width pour actu ne ferait pas de mal et revoir les bases non plus.
http://blog.sansgluten.fr 
^
louna
# 19 Mar 2010 - 09:56:30
Citer
5 Posts
 merci pour les réponses, mais ça ne m'aide pas beaucoup. Le site est créé depuis longtemps, je dois rajouter une sorte de popup en flash par-dessus, ponctuellement, pour mettre en valeur une actualité. Je devrais peut-être revoir les positionnements de tous les blocs pour que ça fonctionne, hors je n'ai pas le temps de le faire, c'est pour ça que je demandais de l'aide... merci quand même.
^
fvsch
# 19 Mar 2010 - 10:39:56
Citer
Administrateur
19942 Posts
 Hello,

louna a écrit :
ce que je comprends c'est qu'un div est positionné en absolu par rapport au premier parent positionné, autrement dit dans mon cas, "global"? là, les autres éléments se positionnent par rapport à lui.... ou alors j'ai rien compris, ce qui est possible aussi lol

Pour ma part c'est la description du problème que je ne comprends pas. Je n'arrive pas à visualiser le rendu obtenu (enfin si, mais je ne vois pas en quoi il poserait problème).

On peut voir le rendu obtenu (page en ligne, ou capture d'écran... et bien mentionner les navigateurs concernés si ce n'est pas partout pareil), et celui souhaité (schéma)?
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
louna
# 19 Mar 2010 - 12:11:46
Citer
5 Posts
 Merci Florent pour la réponse.
En fait, en mettant le test en ligne pour que tu visualise le problème, je viens de m'apercevoir que ça fonctionne. J'avais fait mes tests en local et ça ne fonctionne pas.... (???)
Bonne journée smile

^
Le sujet est clos.
Aller à