如何使文本溢出并重叠另一个div？

Question

我正在制作一个互动的元素周期表，我遇到了一个问题。

在我的下面的例子中，钾和39.0983低于2,8,8,1，这是一个单独的div。

我需要它，以便数字2,8,8,1覆盖在钾之上，这样它就不会压低它。

.base {
  margin: -1px;
  height: 75px;
  width: 75px;
  padding: 0px;
}
.element {
  text-align: center;
  border: 1px solid white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
div.element > div {
  display: flex;
  justify-content: space-between;
}
div.element > div code {
  background-color: transparent;
  font: 10px arial, sans-serif;
}
div.element > div abbr {
  font-size: 140%;
  font-weight: bolder;
}
div.element > div ed {
  font: 10px arial, sans-serif;
}
div.element span,
p {
  font: 12px arial, sans-serif;
}
div.element span {
  display: block;
  text-align: center;
}
div.element p {
  display: block;
  font: 10px arial, sans-serif;
  position: relative;
  top: 1px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-1 base">
  <div id="4_1" class="base element" style="background-color: rgb(255, 153, 0);">
    <div>
      <code>19</code>
      <abbr>K</abbr>
      <ed>
        2
        <br>8
        <br>8
        <br>1
      </ed>
    </div>
    <span>Potassium</span>
    <p>39.0983</p>
  </div>
</div>

https://jsfiddle.net/fau2Lk3k/

Answer 1

您想要如何显示图像并不是很清楚。但是，快速谷歌搜索周期表元素会产生这种共同的布局：

^{来源：Google（image terms permit use）}

使用原始代码，这是修订版：

.base {
  height: 75px;
  width: 75px;
  padding: 0 0 0 2px;
  font-family: arial, sans-serif;
  font-size: 12px;
  background-color: rgb(255, 153, 0);
}
.element {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
div.element > code {
  font-size: 140%;
  font-weight: bold;
}
div.element > abbr {
  font-size: 175%;
  font-weight: bold;
}
div.element > ol {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

<div class="base element">
  <code>19</code>
  <abbr>K</abbr>
  <ol>
    <li>2</li>
    <li>8</li>
    <li>8</li>
    <li>1</li>
  </ol>
  <span>Potassium</span>
  <span>39.0983</span>
</div>