Question

我正在建设这个网站工作，但我遇到了一个小问题。我认为最好有一个标题，然后是旋转横幅，然后是文本，但只有在滚动页面时才移动文本。它在我的显示器上全屏工作正常，但我试图使其响应，所以很明显在较小的屏幕上，横幅收缩但带有文本的div仍然是与顶部相同的像素数。这在两者之间留下了一个没有吸引力的空间。

无论如何这里是我的HTML：

<div id="banner"><script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script> <img class="active" src="Images/banner1.jpg"> <img src=
    "Images/banner4.jpg"> <img src="Images/banner2.jpg"> <img src=
    "Images/banner3.jpg"> <img src="Images/banner5.jpg"></div>
        <script type="text/javascript">

        $(document).ready(function () {
        setInterval(function () {
            //Get current active image
            var active = $('#banner .active');

            // If there is another image(object) left then make that image next
            // If not, go back to the first image of the banner div
            if (active.next().length > 0) var next = active.next();
            else var next = $('#banner img:first');

            //Get the next image ready by modifying the z-index
            next.css('z-index', '2');

            //Fade out the active image, then
            active.fadeOut(1000, function () {
            //Move the active image to the back of the pile, show it and remove the active class
            active.css('z-index', '1').show().removeClass('active');
            //Make the next image the active one  
            next.css('z-index', '3').addClass('active');
            });


        }, 3000);
        });

        </script> <!--BANNER FINISH-->


        <div id="content">
            <div class="maintext">
                <h1>Welcome to InstaGuard security</h1>

            </br>

                <p>We are installers of temporary security systems. </p>
            </div>

和CSS：

#banner {
    width: 100%;
    top: 181px;
    position: absolute;
}

#banner img {
    position: fixed;
    z-index:1;
    width: 100%;
}

#banner img.active {
    z-index:3;  
}

#content {
    position: relative;
    top: 681px; 
    height: 1000px;
    z-index: 70;
    background-color: #FFF;
    padding-top: 0.5%;
}

.maintext {
    text-align: center;
    width: 70%;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
}

是否有可能将“内容”div“粘贴”到“banner”div的底部，以便它们一起移动？我非常感谢您提供的任何帮助。

Answer 1

将父容器设置为position: relative，将其子容器设置为

position: absolute;
bottom: 0;

您将始终将孩子放在父母的底部。

匹配您的示例：

#banner {
    position: relative;
}
#content {
    position: absolute;
    bottom: 0;
}

Codepen中的基本示例：http://codepen.io/Nice2MeatU/pen/avvGRO

Answer 2

检查此更新的jsfiddle链接

CSS代码：

#banner {
    position: relative;
}
#content {
    position: absolute;
}

你能把一个div粘在另一个div的底部吗？

2 个答案: