没有绝对位置的 div 内 div 的绝对位置

Question

我对我的问题做了一个小技巧，以便轻松地看到它：

https://jsfiddle.net/6jzb09nd/

我有一系列嵌套的 div。而巢的最底部我想要一个绝对定位的 div，这样我就可以将它放在它的父 div 中。

当它是页面上唯一的东西时，它会起作用，但是当我开始添加其他元素时，定位就会变得一团糟。

在小提琴中，如果你取消注释“//float:left”，你可以看到定位中断。

代码如下：

.col-sm-2,
.col-sm-10 {
  //float:left;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {

  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

由于带有float 的元素折叠到它的内容，你需要给它一个宽度

.col-sm-2,
.col-sm-10 {
  float:left;
  width: 100%;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>

或设置更多规则以使其正常运行

.preview {
  overflow: hidden;
  white-space: nowrap;
}
.databubble {
  display: inline-block;
}

样本

.col-sm-2,
.col-sm-10 {
  float:left;
}
.col-sm-2:after,
.col-sm-10:after {
  content: '';  
  clear: both;
  display: block;
}

/*  added these 2 rules  */
.preview {
  overflow: hidden;
  white-space: nowrap;
}
.databubble {
  display: inline-block;
}

.leftnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #393;
  position: relative;
  border: 0px solid black;
}

.rightnumouter {
  color: #fff;
  font-size: 4.5vw;
  height: 4.5vw;
  width: 4.5vw;
  float: left;
  background: #C33;
  position: relative;
  border: 0px solid black;
}

.leftnuminner {
  color: #000;
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rightnuminner {
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lefttextouter {
  background: #3C9;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 0;
  position: relative;
}

.righttextouter {
  background: #C69;
  border-radius: 0 1.5vw 1.5vw 0;
  color: #000;
  font-size: 3vw;
  height: 3.2vw;
  text-transform: uppercase;
  float: left;
  padding: 0 0 0 .2vw;
  position: relative;
}

.lefttextinner {
  color: #000;
  margin: 0 .5vw 0 0;
}

.righttextinner {
  color: #000;
  margin: 0 1vw 0 0;
}

<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
  <div class="preview">
    <div class="databubble">
      <div class="leftnumouter">
        <div class="leftnuminner">5
        </div>
      </div>
      <div class="lefttextouter">
        <div class="lefttextinner">Sales
        </div>
      </div>
    </div>
    <div class="databubble">
      <div class="rightnumouter">
        <div class="rightnuminner">3
        </div>
      </div>
      <div class="righttextouter">
        <div class="righttextinner">Orders
        </div>
      </div>
    </div>

  </div>
</div>