le padding ne fonctionne pas dans la div absolue parent bootstrap 4

Question

J'ajoute div con absolute à l'intérieur d'un autre div con relative en utilisant bootstrap4 comme ceci :

.p-r{
  padding:8px;
  background-color:#ddd;
  height:100px;
}
.p-a{
  bottom:3px;
  background-color:#000
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
      </div>
    </div>
  </div>
</div>

mais en action, padding ne fonctionne pas vraiment en absolute div :

Answer 1

C'est parce que vous définissez w-100 ce qui signifie width: 100% !important de l'enfant div .

Pour remédier à ce problème, définissez la largeur de la div enfant à width: calc(100% - 16px);

.p-r {
  padding: 8px;
  background-color: #ddd;
  height: 100px;
}

.p-a {
  bottom: 3px;
  background-color: #000;
  width: calc(100% - 16px);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-r position-relative">
        <div class="p-a position-absolute">
          text
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Enveloppez votre absolu dans une div supplémentaire, en lui donnant un nom relatif. positionnement en spécifiant un height: 100% . J'ai indiqué la classe .additional à lui :

<div class="p-r position-relative">
   <div class="additional position-relative">
     <div class="p-a position-absolute w-100">
        text
     </div>
   </div>
</div>

.additional {
  height: 100%;
}  

.p-r {
  padding:8px;
  background-color:#ddd;
  height:100px;
}
.p-a {
  bottom:3px;
  background-color:#000
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-r position-relative">
       <div class="additional position-relative">
        <div class="p-a position-absolute w-100">
          text
        </div>
       </div>
      </div>
    </div>
  </div>
</div>