html - 两个连续位置相对不正常

Question

我在 img-group 中写了包含照片墙的内容。我使用 Bootstrap 的澄清。然后我写了一个页脚。但是页脚不正常。

我的图像包装器是相对的，页脚是相对的。 img-group 是绝对的。我再次查看位置教程，但我不知道如何处理这个问题。我要崩溃了>.< 帮助。

我的 html:

    <div id="content">
     <div class="rwrapper">
        <div class="container">
            <h1 class="margintop text-center">Popular Activities</h1>
        </div>
        <div class="img-group">
            <a id="pic1" class="line1" href="activity-single.php?act_id=4">test</a>
            <a id="pic2" class="line1" href="activity-single.php?act_id=12">test2</a>
            <a id="pic3" class="line1" href="activity-single.php?act_id=26">test3</a>
            <a id="pic4" class="line2" href="activity-single.php?act_id=27">test4</a>
            <a id="pic5" class="line2" href="activity-single.php?act_id=31">test5</a>
            <a id="pic6" class="line2" href="activity-single.php?act_id=43">test6</a>
            <a id="pic7" class="line3" href="activity-single.php?act_id=6">test7</a>
            <a id="pic8" class="line3" href="activity-single.php?act_id=5">test8</a>
            <a id="pic9" class="line3" href="activity-single.php?act_id=1">test9</a>
        </div>              
    </div>
</div>
<div class="clearfix"></div>
<div id="footer" class="index">
    <div class="container">
        <div class="wrapper">
            <ul class="list-inline">
                <li><a href=""><i class="fa fa-facebook-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-google-plus-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-twitter-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-pinterest-square fa-3x"></i></a></li>
            </ul>
            <p class="h5 text-center">copyright © 2015 Sports Buddy Group.</p>
        </div>

    </div>  
</div>  

我的CSS:

    /* image group */
    .img-group{
        position: absolute;
        left: 0;
        margin-top: 2%;
        width: 100%;
    }

    .img-group a{
        position: relative;
    }

    .img-group a{
        float: left;
        width: 33.3333333%;
        display: block;
        text-align: center;
        top: 0;
        left: 0;
        text-indent: -999px;
    }

    .img-group a::before{
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 233px;
    }
    .img-group a::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 233px;
        top: 0; 
        left: 0;
        background: rgba(0,0,0,0.45);
        z-index: 10;
    }


    .rwrapper{
        position: relative;
    }

Answer 1

绝对定位的元素不会影响其容器的高度，因为它们已从正常的元素流中移除。参见 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning .所以，你有两个我能想到的选择。第一，将高度应用于您的 rwrapper 类。喜欢

.rwrapper{
    position: relative;
    height: 300px; /* <- insert the height you need here
}

但是，如果您不知道需要多少空间，那么此解决方案将行不通。我的另一个建议是将所有内容都切换为使用 position: relative。您似乎没有通过使用绝对定位获得任何 yield ，至少在您提供的代码中是这样。