html - 如何修复我的 div，使其在重新缩放图像时向上移动

Question

我刚刚在我的主页中插入了一个图像 slider ，它可以在调整浏览器窗口大小时缩小内容。
然而，我的问题是我下面有一个 div，当图像 slider 自行调整大小时它不会向上移动，所以我留下了一大块空白区域。

这是否与 slider 下方的 div 的 CSS 有关？

HTML

<div id="slider1_container">
        <!-- Loading Screen -->
        <div u="loading">
            <div id="loadingchild1">
            </div>
            <div id="loadingchild2">
            </div>
        </div>


        <!-- Slides Container -->
        <div id="slides" u="slides">
            <div>
                <div class="image1">
                    <img  u="image" src="C:\Users\Michael\Desktop\iMac-Mockup.png" />
                </div>


                <div class="toptext">
                    RED
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>

            <div>
                <div class="image1">
                    <img u="image" src="C:\Users\Michael\Desktop\iPad-Mockup.png" />
                </div>
                <div class="toptext">
                    Red
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>

            <div>
                <div class="image1">
                    <img u="image" src="C:\Users\Michael\Desktop\iPhone-Mockup.png" />
                </div>
                <div class="toptext">
                    Red
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>
        </div>
<div id="ContentWrapper">
        <div id="FreeLanceText">
            <p>A Freelance Web Designer/ Developer in Chester full of Fresh ideas,</p>
            <p>I create Affordable and Stylish Websites to help your Business Online</p>
        </div>

CSS

#ContentWrapper
{

width:100%; /*1920px*/
height:100px;
background-color:#000000;
color:white;
margin-top:485px;
}

#FreeLanceText
{

    text-align:center;
    font-size:180%;

}

Answer 1

您在 #ContentWrapper 上设置了 485 像素的上边距。我猜这是因为您在 slider 上使用了绝对定位，您需要为此留出足够大的间隙。

相反，将内容放回到常规文档流中(相对定位)并在 #ContentWrapper 上设置边距，只是为了在它和 slider 之间创建适当的间隙。