Positionner un bouton sur un autre en utilisant CSS

Question

J'ai besoin d'aide CSS avancée ici. J'ai un bouton de connexion et un bouton de registre, je veux seulement un à apparaître à la fois. Si l'utilisateur n'est pas connecté, le bouton d'enregistrement doit apparaître en haut du bouton de connexion. Nous avons un backend fou complexe qui va générer le code pour le bouton de registre si le serveur pense que l'utilisateur n'est pas connecté. Mais les deux seront sortis par le serveur, le bouton de registre seulement si l'utilisateur est connecté. qui peut être fait avec un positionnement absolu pour se déplacer les uns sur les autres?

Answer 1

Oui, il y a.

.button1 { 
    position: absolute; 
    left: 100; 
    top: 100; 
    z-index: 1000; 
} 

.button2 { 
    position: absolute; 
    left: 100; 
    top:100; 
z-index: 1001; 
} 

Mais je n'aime pas faire ça. D'une part, il vous enlève du flux naturel du balisage et vous oblige à positionner le bouton, peu importe le contenu qui vient au-dessus. Pour un autre, que faire si le bouton inférieur est plus grand que le haut? Ensuite, vous avez un problème avec les bords de l'inférieur visible.

Utilisez la solution de Dominic ci-dessus. C'est beaucoup mieux.

Answer 2

Pourquoi les mettre l'un sur l'autre? Il y a une "bonne" façon de cacher des choses en CSS, en utilisant la propriété display:

.register_button { display: none; } 

Ensuite, dans votre code HTML:

<button type="button" class="register_button">Will not show up!</button> 

Answer 3

Vous devez d'abord vérifier id de l'élément en utilisant l'outil comme firebug (addon de Firefox), vous devez utiliser cet identifiant dans css pour le positionner, supposons que le bouton a id myid, vous devriez le faire en CSS:

#myid 
{ 
    position:absolute; 
    top:100px; /* adjust this */ 
    left:100px; /* adjust this */ 
}