Question

使用Bootstrap 3我有一个如下标记：

<!-- Start of Container-->
<div class="container">
    <!-- Start of well-->
    <div class="well">
        <div id="wrapper" class="col-lg-6 col-md-6">
            <div id="layer3" class="col-lg-12 col-md-12"></div>
            <div id="layer2" class="col-lg-12 col-md-12"><img src="http://localhost/bg_sh.png" class="img-responsive" alt="Responsive image" /></div>
            <div id="layer1" class="col-lg-12 col-md-12"><img src="http://localhost/MapNAs.png" class="img-responsive" alt="Responsive image" /></div>
            <div id="canvas" class="col-lg-12 col-md-12"></div>
        </div>
    </div>
<!-- End of well-->
</div>
<!-- End of Container-->

您能告诉我如何将layer3，layer2，layer1和canvas divs叠加在一起吗？

Answer 1

您是否期待这个demo

查看工作区demo

<!-- Start of Container-->
<div class="container">

  <div id="wrapper" class="row">
    <div id="layer3" class="col-sm-6 col-md-12">#layer3</div>
    <div id="layer2" class="col-sm-6 col-md-12">#layer2</div>
    <div id="layer1" class="col-sm-6 col-md-12">#layer1</div>
    <div id="canvas" class="col-sm-6 col-md-12">canvas</div>
  </div>

</div>
<!-- End of Container-->

More info here about bootstrap grid

Answer 2

这是你想要的吗？

<div id="layer3" class="col-lg-12 col-md-12" style="z-index: 4;position: absolute; top: 0;"></div>
<div id="layer2" class="col-lg-12 col-md-12" style="z-index: 3;position: absolute; top: 0;"><img src="http://localhost/bg_sh.png" class="img-responsive" alt="Responsive image" /></div>
<div id="layer1" class="col-lg-12 col-md-12" style="z-index: 2;position: absolute; top: 0;"><img src="http://localhost/MapNAs.png" class="img-responsive" alt="Responsive image" /></div>
<div id="canvas" class="col-lg-12 col-md-12" style="z-index: 1;position: absolute; top: 0;"></div>

关于将4个分区完全放在一起的问题

2 个答案: