Comment positionner le Bouton exactement dans le CSS
J'ai essayé de faire un site simple, comme cette. Cependant , je me rends compte maintenant que je suis mauvais à la CSS de Positionnement pour le bouton ne fait jamais apparaître comme prévu.
Comme vous l'avez deviné , je veux que le bouton (#play_button) pour montrer exactement sur le bouton de lecture de l'image en arrière-plan. Quelqu'un peut-il me dire comment il faut faire ?
Mon code CSS:
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover; /*For covering full page*/
}
#play_button {
position:relative;
transition: .5s ease;
top: 191px;
left: 420px;
right: -420px;
bottom: -191px;
}
#play_button:hover {
-webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
}
Mise à JOUR:
Juste une chose de plus, problème de produit, c'est que si j'ai à nouveau la taille de la fenêtre du navigateur , puis l'image se déplace vers une nouvelle position.
Mise à JOUR:
Problème résolu 🙂 Ici, dans cet exemple, vous pouvez voir comment le bouton reste au centre de la page, même si vous avez re de la taille de la fenêtre du navigateur.Comme toujours , vous pouvez modifier les left
et top
compensations pour obtenir les résultats souhaités. Voici le code.
Ok, vraiment désolé pour ce hors-sujet , je ne savait pas que. Comme pour la prévisualisation exemple, j'ai un plunker exemple, mais je vais télécharger un jsfiddle aussi comme vous le dites.Et en ajoutant le code HTML,juste une minute.
Utiliser le positionnement absolu
Ok ,merci, j'ai eu la réponse . Merci à tous pour votre aide.
Si vous avez une solution qui diffère de l'réponses déjà fournies, poster une réponse. Ne modifiez pas votre question à contenir la solution et claque RÉSOLU. Sinon, acceptez l'une des réponses est le plus proche de la solution.
OriginalL'auteur Gaurang Tandon | 2013-09-05
Vous devez vous connecter pour publier un commentaire.
Essayez d'utiliser le positionnement absolu, plutôt que le positionnement relatif
cela devrait vous obtenez fermez - vous pouvez régler en jouant sur les marges haut/gauche postes
http://jsfiddle.net/rolfsf/9pNqS/
OriginalL'auteur rolfsf
J'aimerais utiliser le positionnement absolu:
OriginalL'auteur Jonas Grumann
Il semble qu'un peu centre de l'écran. Donc, je voudrais faire comme ceci
OriginalL'auteur Praveen
Donc, l'astuce c'est d'utiliser le positionnement absolu
calc
comme ceci:où XYpx est la moitié de la taille de votre image, dans mon cas, l'image est un carré. Bien sûr, maintenant obsolète cas, l'image doit également changer sa taille proportionnellement en réponse à la fenêtre de redimensionnement pour être en mesure de rester au centre, sans chercher hors de proportion.
OriginalL'auteur Gaurang Tandon