web-dev-qa-db-fra.com

Définir la position absolue et la marge

Je voudrais définir position d'un élément sur absolute et avoir un margin-bottom, mais il semble que le margin-bottom n'a pas d'effet.

HTML:

<div id='container'></div>

CSS:

#container {
  border: 1px solid red;
  position: absolute; 
  top: 0px;
  right: 0px;
  width: 300px;
  margin-bottom: 50px; // this line isn't working
}
csspositionmargin
29
kirby

Qu'attendez-vous margin-bottom à faire lorsque votre élément est positionné par sa face supérieure?

margin-bottom ne fera rien à un élément absolutely-positionné si l'élément n'a pas de propriété top.

16
Niet the Dark Absol

Je sais que ce n'est pas une réponse très opportune, mais il existe un moyen de résoudre ce problème. Vous pouvez ajouter un élément "spacer" à l'intérieur de l'élément positionné absolutely avec une marge inférieure négative et une hauteur de la même taille que la marge inférieure négative.

HTML:

<div id="container">
    <div class="spacer"></div>
</div>

CSS:

// same container code, but you should remove the margin-bottom as it has no effect

// spacer code, made it a class as you may need to use it often
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; use this if you want #container to have a 'bottom padding', in this case of 20px */
    background: transparent; /* you'll need this if #container's parent element has a different background from #container itself */
}
37
Joey

En s'appuyant sur réponse de Joey , pour un balisage plus propre, utilisez le CSS :after- sélecteur pour ajouter une entretoise pour la marge inférieure souhaitée.

CSS

#container:after {
    position: absolute;
    content: "";
    bottom: -40px;
    height: 40px;
    width: 1px;
}
23
nik

Vous devez définir position sur relative afin de définir son margin.

Le margin-bottom, margin-left et margin-right fonctionnera PAS fonctionnera lorsque l'élément sera position: absolute.

Exemple: HTML:

<img src="whatever.png"/>

CSS:

img {
   position: relative;
   margin: 0 auto;
}
2
Notlaw

J'ai trouvé la solution!!!

définissez une hauteur minimale du conteneur, la position devra être modifiée de l'absolu à l'héritage, définissez la propriété top sur une valeur de votre choix et l'affichage devra être en ligne.

Cela a fonctionné pour moi lorsque j'ai essayé d'utiliser la position absolue, de déplacer l'élément avec la propriété top et d'essayer d'ajouter une marge.

min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;
0
Tom McDonough

Pour certains cas d'utilisation, la modification de position: absolute à position: relative résout également ce problème. Si vous pouvez modifier votre positionnement, ce sera le moyen le plus simple de résoudre le problème. Sinon, l'entretoise de Joey fait l'affaire.

0
Barth Zalewski

Comme je ne connais pas la hauteur à l'avance, j'ai plutôt ajouté un élément invisible à la fin de la position absolument absolue avec une hauteur que je voulais que la marge soit.

Dans mon cas, l'élément absolument positionné est un tableau, j'ai donc ajouté une ligne vide supplémentaire avec une hauteur de 100px. Ensuite, la bordure qui était censée se trouver au bas du tableau est passée à la place "tr: ​​nth-last-of-type (2) td".

J'espère que cela t'aides.

0
Dovev Hefetz