css - Bootstrap Well中定位相对框的问题

Question

能否请您看一下 this demo 并告诉我为什么我无法在 Bootstrap 中定位一组相对和绝对定位的框 .well

<div class="well">
  <div id="wrapper">
    <div id="box-1">
      <img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/mobile-apps.jpg" alt="..." class="img-responsive img-thumbnail">
    </div>
    <div id="box-2">This is Test</div>
  </div>
</div>

和CSS

#wrapper {
  position: relative;
}

#box-1 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

#box-2 {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

Answer 1

我假设您想将 #box-2 置于 .well 的中心，它是图像的包装器(花哨的边框，对吧？)。以下是实现该目标的方法:

body {
  margin: 10px;
}
#wrapper {
  position: relative;
}
#box-1 {
  max-width: 100%;
}
#box-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  /* This is for styling, so you can see it */
  max-width: calc(100% - 200px);
  min-width: 65%;
  background-color: rgba(255, 255, 255, .5);
  border: 1px solid white;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12);
  padding: 20px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="well">
  <div id="wrapper">
    <div id="box-1">
      <img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/mobile-apps.jpg" alt="..." class="img-responsive img-thumbnail">
    </div>
    <div id="box-2"><h2>This is a Test.</h2><p>Tousled post-ironic tofu cronut, heirloom disrupt proident labore. Four dollar toast flexitarian food truck kale chips mumblecore. Consectetur shabby chic ea, ullamco aliqua small batch kogi sriracha laborum intelligentsia brooklyn. Cliche listicle exercitation sriracha whatever organic. Nesciunt minim wayfarers, squid keffiyeh fixie cupidatat raw denim. Food truck ramps deserunt in listicle, ugh etsy ut pug street art ethical hashtag godard. Pour-over placeat seitan DIY cronut mumblecore.</p></div>
  </div>
</div>