Изменил положение карусели на абсолютное и стало причиной перемещения других <div>с. Как я могу это исправить?

Question

У меня была проблема с моей каруселью, где был пробел (пробел) с правой стороны карусели. Я читал здесь, что хорошим решением было бы установить абсолютную позицию .carousel. Когда я это сделал, это сработало! Однако, это также переместило мою другую, и теперь есть текст, перекрывающий карусель.

<div id='home' class='row'>
<div class='col-12 p-0'>
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div id='caroselHeight'class="carousel-inner">
        <div class="carousel-item active container-fluid">
            <img src="sky1c.jpg" class='img-fluid' alt="First Slide">
            <div id='titleCard' class="carousel-caption d-none d-md-block">
                <h1 id='cloudFontH'>Welcome To My Portfolio</h1>
                <small>Slide right to view my projects</small>
            </div>
        </div>
        <div class="carousel-item container-fluid">
            <img src="slide02.jpg" class='img-fluid' alt="Second Slide">
        </div>
        <div class="carousel-item container-fluid">
            <img src="slide03.jpg" class='img-fluid' alt="Third Slide">
        </div>
    </div>
    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</div>
</div>

Это моя карусель, и это css для нее

.carousel-inner{
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height : 600px;
}
.carousel{
    position: absolute;
    background-size: cover;
}
#home{
    width: 100%;
}

Вот раздел, который перекрывается

<div id='aboutSection'>
        <div>
        <img src='craft.png' id='craft'>
        </div>
<section id='about'>
    <div class='container-fluid'>
        <h1 id='cloudFontH' class='text-center'>About Me</h1>
                <p id='cloudFontT' class='text-center'>
                    I am a student at the University of New Orleans. I am persuing a degree in computer science with a 
                    minor in math. 
                </p>

Я Я не собираюсь показывать это целиком, так как это в основном весь мой код, и я чувствую, что уже слишком много публикую. Наконец, css

#aboutSection{
    background-image: url("sky1.jpg");
    height: auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Еще раз извините за публикацию ТАКОГО МНОГО кода, я не уверен, будет ли он полезным или нет, но я надеюсь, что это так. Спасибо за вашу помощь!

Answer 1

Вот что происходит, когда вы устанавливаете что-то как абсолютное - оно больше не занимает места на странице, поэтому другие вещи могут перемещаться в то же пространство, которое занимало.

Использование position: absolute для получения избавиться от небольшого количества нежелательных пробелов - это излишне. Я рекомендую вам искать другую технику, чтобы избавиться от небольшого количества пустого пространства вместо ... всего пространства.