Question

请你看一下this demo，让我知道为什么我无法在引导程序.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

我假设您希望将<div v-html="html"></div>  <div>{{{ html }}}</div>置于#box-2内，这是图像的一个包装（一个奇特的边框，对吗？）。以下是如何实现这一目标的：

＆＃13;

.well

＆＃13;

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;
}

＆＃13;

Answer 2

这是因为你需要在你已经忘记的包装上设置一个高度（或最小高度）。您还需要将overflow：hidden设置为＃box-1，这将使您的图像不会溢出开箱即用。实际上，一个容器（位置：相对）不会根据它的绝对位置儿童进行调整。相反，你的绝对定位的孩子必须设置维度，这些维度可以是相对的（％单位）或非相对的（固定单位，如px em等）。在这里，您设置两个子框以通过顶部/右侧/底部/左侧属性覆盖整个容器的大小，但您的容器没有隐式（由内容生成）或显式（由宽度，高度，填充等属性生成）等等）工作代码如下所示 -

body {
    margin: 10px;
}
#wrapper{
    position:relative;
    padding: .2em;
    min-height: 10em;
}
#box-1{
    position:absolute;
      left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  overflow: hidden;
}
#box-2{
  position:absolute;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
}

关于在Bootstrap井中定位相对盒子的问题

2 个答案: