如何让我的 div 容器保持原位，而不管其他容器发生的变化？

Question

所以，我想留在原地的 div 容器是 dot-container ，如您所见，随着段落变长，点向下移动并调整，我想要它们无论段落大小，都可以留在原地。我怎样才能做到这一点？

我尝试了一些方法但没有成功，例如为点容器设置高度并设置顶部和底部边距，以及添加包装容器。请帮助，提前致谢！！

<section id="reviews">
            <div class="review-container">
                <img src="images/testimonial-image.jpg" alt="people browsing through a laptop and smiling" class="review-img">
                <div class="testimonials">
                    <h2 class="review-heading">What People Say</h2>

                    <!--                    first testimony-->
                    <div id="tst1">
                        <p class="review-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing eiusmod tempor incididunt ut labore et dolore magna.</p>
                        <div class="review-photo">
                            <img src="images/tst-image1.jpg" class="test-img">
                            <h4 class="tst-name">Austin</h4>
                        </div>
                    </div>

                    <!--                    second testimony-->
                    <div id="tst2">
                        <p class="review-paragraph">Donec pretium tristique elit eget sodales. Pellentesque posuere, nunc id interdum venenatis, leo odio cursus sapien, ac malesuada nisl libero eget urna.</p>
                        <div class="review-photo">
                            <img src="images/tst-image2.jpg" class="test-img">
                            <h4 class="tst-name">Sofia</h4>
                        </div>
                    </div>

                    <!--                    third testimony -->
                    <div id="tst3">
                        <p class="review-paragraph">Vestibulum tempor facilisis efficitur. Sed nec nisi sit amet nibh pellentesque elementum. In viverra ipsum ornare sapien rhoncus ullamcorper.</p>
                        <div class="review-photo">
                            <img src="images/tst-image3.jpg" class="test-img">
                            <h4 class="tst-name">Monica</h4>
                        </div>
                    </div>

                    <div class="dot-container">
                        <div class="dot" onclick="firstTst();"></div>
                        <div class="dot" onclick="secondTst();"></div>
                        <div class="dot" onclick="thirdTst();"></div>
                    </div>
                </div>
            </div>

        </section>

Answer 1

我假设图像都是等高的 - 然后我会给外部 class 一个相对位置，然后你可以相对于它的父容器绝对定位点容器：

.testimonials {
    position: relative;
 }
 
 .dot-container {
    position: absolute;
    bottom: 30px;
    // .. other positioning stuff
 }

如何让我的 div 容器保持原位，而不管其他容器发生的变化？

How do I get my div container to stay in place regardless of the changes happening in other containers?

html

css

position

css-position