Podium CSS：位于div底部的位置元素

Question

我正在尝试使用CSS和HTML创建一个讲台。通过在父亲和position: relative上添加position: absolute; bottom: 0到台阶，我已经实现了在底部定位讲台的台阶，但是因为我想在台阶上方显示文本，所以我在将文本放在那里时遇到了问题。

我的第一个方法是将文本和步骤放在div上并且绝对定位这个div，但是当步骤得到他们的父亲他们父亲的百分比时父亲需要有一个height: 100%属性，所以div解决方案无效。

在这里，我附上了我的代码片段：

@font-face {
    font-family: DaggerSquare;
    src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf")  format("truetype");
}

#podium-box {
	width: 100%;
	margin: 0 auto;
}

.podium-number {
	font-family: DaggerSquare;
	font-weight: bold;
	font-size: 4em;
	color: white;
}

.step-container {
	width: 100%;
  	position: relative;
}

.step {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.bg-blue {
	background-color: #063b65;
}

#first-step {
	height: 50%;
}

#second-step {
	height: 35%;
}

#third-step {
	height: 30%;
}

.centerBoth {
    display: flex;
    justify-content: center;
    align-items: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="import" type="css" href="podium-chart.css">

<div id="podium-box" class="row" style="height: 400px">
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 2
		</div>
		<div id="second-step" class="bg-blue step centerBoth podium-number">
			2	
		</div>
	</div>
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 1
		</div>
		<div id="first-step" class="bg-blue step centerBoth podium-number">
			1
		</div>
	</div>
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 3
		</div>
		<div id="third-step" class="bg-blue step centerBoth podium-number">
			3
		</div>
	</div>
</div>

Answer 1

不需要使用position:absolute只需使用flexbox和flex-columns。

然后将文本div推到底部。

@font-face {
  font-family: DaggerSquare;
  src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}

#podium-box {
  margin: 0 auto;
  display: flex;
}

.podium-number {
  font-family: DaggerSquare;
  font-weight: bold;
  font-size: 4em;
  color: white;
}

.step-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.step-container>div:first-child {
  margin-top: auto;
  text-align: center;
}

.step {
  text-align: center;
}

.bg-blue {
  background-color: #063b65;
}

#first-step {
  height: 50%;
}

#second-step {
  height: 35%;
}

#third-step {
  height: 30%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="import" type="css" href="podium-chart.css">

<div id="podium-box" class="row" style="height: 300px">
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 2
    </div>
    <div id="second-step" class="bg-blue step centerBoth podium-number">
      2
    </div>
  </div>
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 1
    </div>
    <div id="first-step" class="bg-blue step centerBoth podium-number">
      1
    </div>
  </div>
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 3
    </div>
    <div id="third-step" class="bg-blue step centerBoth podium-number">
      3
    </div>
  </div>
</div>

Answer 2

正如已经指出的那样，你可以从头开始构建这个更好一点。但是如果你想保持原样，那么只需给包含文本的div一个类，并给它们以下属性：

 position:absolute;
 bottom:70px;