Блог

Главная - Вопросы по программированию - абсолютный div не отображается в начальной загрузке контейнера 4

абсолютный div не отображается в начальной загрузке контейнера 4

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня есть этот код для отображения div с absolute позицией внутри div с container использованием bootstrap 4.

Код:

 <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>

Но в действии div с absolute позицией не отображается true в container (показать внешний из container ). как решить эту проблему ?!

Демонстрационный jsfiddle

Комментарии:

1. Вы имеете в виду, что он выходит за пределы родительского контейнера? Это потому, что вы даете ему ширину 100% контейнера, но контейнер имеет отступ в 15 пикселей, поэтому внутренний div начинается с 15 пикселей влево, поэтому он расширяется на 15 пикселей вправо. Зачем вы это делаете position: absolute ? Это сработает, если вы сделаете его относительным дочерним div

2. Привет! Ваш <div> на самом деле абсолютный. Я не совсем понимаю, чего вы пытаетесь достичь здесь. Какова цель?

Ответ №1:

Использование позиций в ваших подразделениях звучит странно. В любом случае я бы предложил обернуть ваш контент в строку:

 .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>

Ответ №2:

В контейнере есть заполнение, опять же, вы используете w-100, что означает, что 100%, заполнение и 100% ширина противоречат друг другу. просто удалите заполнение из контейнера, чтобы решить проблему

 .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>