Positionnement absolu ignorant le rembourrage du parent

Question

Positionnement absolu ignorant le rembourrage du parent

Demandé el 14 de Juin, 2013: Quand la question a-t-elle été
154045 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Comment faire en sorte qu'un élément positionné de manière absolue respecte le padding de son parent ? Je veux qu'un div interne s'étende sur la largeur de son parent et qu'il soit positionné au bas de ce parent, en fait un pied de page. Mais l'enfant doit respecter le remplissage du parent et ce n'est pas le cas. L'enfant est plaqué contre le bord du parent.

Donc je veux ça :

enter image description here

mais je reçois ça :

enter image description here

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

Je peux le faire avec une marge autour de la division intérieure, mais je préférerais ne pas avoir à l'ajouter.

Demandé el 14 de Juin, 2013 par user1334007

Answer 1

4 Réponses

Answer 2

3voto

user2909624 Points 14

On aurait pu facilement utiliser un niveau supplémentaire de Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Démonstration : https://jsfiddle.net/soxv3vr0/

Répondu el 10 de Novembre, 2016 par user2909624 (14 Points )

Answer 3

3voto

bhavya_w Points 484

1.) vous ne pouvez pas utiliser la grande bordure sur le parent -- au cas où vous voudriez avoir une bordure spécifique

2.) vous ne pouvez pas ajouter de marge - dans le cas où votre parent fait partie d'un autre conteneur et que vous voulez que votre parent prenne toute la largeur de ce grand parent.

La seule solution applicable est d'envelopper vos enfants dans un autre conteneur de sorte que votre parent devienne le grand-parent, puis d'appliquer un remplissage au nouveau conteneur / parent des enfants. Vous pouvez également appliquer directement le remplissage aux enfants.

Dans votre cas :

.css-sux{
  padding: 0px 10px 10px 10px;
}

Répondu el 28 de Mai, 2015 par bhavya_w (484 Points )

Answer 4

2voto

ßãlãjî Points 95

Ajouter padding:inherit dans votre position absolue

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>

</div>

Répondu el 5 de Mai, 2020 par ßãlãjî (95 Points )

Answer 5

1voto

Giga Points 11

Je définirais la largeur de l'enfant de cette façon :

.child {position: absolute; width: calc(100% - padding);}

Dans la formule, le rembourrage est la somme des rembourrages des parents de gauche et de droite. J'admets que ce n'est probablement pas très élégant, mais dans mon cas, un div ayant la fonction d'un overlay, cela a fonctionné.

Répondu el 6 de Novembre, 2020 par Giga (11 Points )

Positionnement absolu ignorant le rembourrage du parent

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Positionnement absolu ignorant le rembourrage du parent

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: