Question

我正在尝试构建一个网页的一部分（通过Bootstrap 3.0），在本节中，我试图将三个div或层放在彼此之上。

因此它堆叠如下：背景“正方形”，页脚和带图像的前景“正方形”。

这是我的HTML：

<div class="row">
    <div class="col-xs-12 col-md-1 col-md-offset-2" id="twitterBg">
        <div id="twitter"><a href="#"><img src="images/twitter.png" class="img-responsive" id="twitterIcon" alt="Twitter Icon" /></a></div>
    </div>

    <div class="col-xs-12 col-md-1 col-md-offset-2" id="dribbbleBg">
        <div id="dribbble"><img src="images/dribbble.png" class="img-responsive" id="dribbbleIcon" alt="Dribbble Icon" /></div>
    </div>

    <div class="col-xs-12 col-md-1 col-md-offset-2" id="facebookBg">
         <div id="facebook"><img src="images/facebook.png" class="img-responsive" id="facebookIcon" alt="Facebook Icon" /></div>
    </div>

<div class="col-xs-12 col-md-12" id="footer"></div> 
</div>

CSS：

#wrapper2{
    height: 150px;
    padding: 0;
}

#twitterBg{
    width: 100px;
    height: 100px;
    background-color: rgba(26, 188, 156, .5);
    margin-top: 100px;
}

#dribbbleBg{
    width: 100px;
    height: 100px;
    background-color: rgba(26, 188, 156, .5);
    margin-top: 100px;
}

#facebookBg{
    width: 100px;
    height: 100px;
    background-color: rgba(26, 188, 156, .5);
    margin-top: 100px;
}

#twitter{
    width: 90px;
    height: 90px;
    background-color: #fff;
    z-index: 999;
}

#twitterIcon{
    padding: 20px;
}

#dribbble{
    width: 95px;
    height: 95px;
    background-color: #fff;
    z-index: 999;
}

#dribbbleIcon{
    padding: 20px;
}

#facebook{
    width: 95px;
    height: 95px;
    background-color: #fff;
    z-index: 999;
}

#facebookIcon{
    padding: 20px;
}

#footer{
    height: 240px;
    background-color: #1abc9c;
    color: #fff;
    position: relative;
    display: block;
}

目前我无法让它们堆叠。有什么想法吗？

Answer 1

你可能需要看一下绝对定位。我真的不明白你想要实现什么，以及为什么你想要在你的页脚后面摆正方形。希望这可以帮助您：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

多层堆叠在一起

1 个答案: