html - 如何保持元素绝对在他们的位置 bootstrap 3

Question

我有一些问题，位置元素无法在调整大小窗口中保持绝对位置(在响应中)在响应绝对元素移动比率父级之后我怎样才能保留它？

在 bootplay 中我的代码(如果将绝对元素调整到右边):

Bootplay

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-3 right-section">
          right
        </div>
        <div class="col-md-9">
          <div class="row">

            <div class="col-md-3">
              <div class="image"></div>
              <div class="type">Element</div>
            </div>
            <div class="col-md-3">
              <div class="image"></div>
              <div class="type">Element</div>
            </div>
            <div class="col-md-3">
              <div class="image"></div>
              <div class="type">Element</div>
            </div>
            <div class="col-md-3">
              <div class="image"></div>
              <div class="type">Element</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

.right-section {
  background-color: #e3e3e3;
}

.image {
  width: 200px;
  height: 200px;
  background-color: #9EC7E3;
  border-radius: 50%;
}

.type {
  background-color: red;
  position: absolute;
  top: 120px;
  right: 5px;
  padding: 10px;
}

Answer 1

问题是绝对定位的<div class="type">Element</div>元素相对于列 div 定位，而不是 <div class="image"></div>界。

如果将绝对定位的元素移动到圆形图像 div 中，然后将这些元素设为 position: relative; ，你应该得到你想要的:

HTML:

<div class="col-md-3">
    <div class="image">
        <div class="type">Element</div>
    </div>
</div>

CSS:

.image {
  width: 200px;
  height: 200px;
  background-color: #9EC7E3;
  border-radius: 50%;
  position: relative;
}