容器引导程序 4 中不显示绝对 div

Question

I have this code for show div with absolute position inside div with container using bootstrap 4.

Code:

<div class="container position-relative">
  <div class="position-absolute text-justify w-100">
    text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo
  </div>
</div>

But In action div with absolute position not show true in container (show outer of container ). how do fix this problem?!

Demo jsfiddle

Answer 1

Using positions in your divs sounds strange. In any case I would suggest to wrap your content into a row:

 .container { height: 500px; background-color: #eee; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="container position-relative"> <div class="row"> <div class="position-absolute text-justify w-100"> text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo </div> </div> </div>

Answer 2

There is padding in the container, again you use w-100 that means 100%, padding, and 100% width conflicting themselves. just remove the padding from container will solve the problem

 .container{ height:500px; background-color:#eee; padding: 0px; }

 <div class="container position-relative"> <div class="position-absolute text-justify w-100"> <p> text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo </p> </div> </div>