我试图将一些<h1></h1>
文本和Angular Material的电子邮件表单放入具有彩色背景的<div></div>
部分的中心。这些物品堆叠在一起,就像是层层叠叠。电子邮件表单需要位于<h1></h1>
标签下方。我可以正确对齐的唯一方法是position:flex
,我怀疑这是潜在的原因。CSS Flex堆叠物品
这是我的HTML和CSS:
<div class="top-section">
<h1 class="top-h1">
mytitle
</h1>
<md-input-container class="email-form" color="accent">
<input mdInput placeholder="Email us" value="Your email address">
</md-input-container>
</div>
.top-section {
height: 350px;
background-color: #04041b;
align-items: center;
display: flex;
justify-content: center;
}
.top-h1 {
color: #E8E8E8;
font-size: 60px;
position: absolute;
}
.email-form {
color: white;
font-size: 30px;
}
有什么想法?
这些问题可能试图解决同样的问题,但他们在措辞上的差异是惊人的。事实上,另一个问题并没有清楚地说明问题。它的标题写道:“防止从一侧到另一侧渲染柔性项目”。这并不能反映出我将Flex项目叠加在一起的问题。如果有人正在寻找这个问题的答案,另一个问题就不会出现,因为它措辞不当。我的问题很清楚。因此标题为:“Flex将堆叠项目放在彼此之上”。请重新考虑标记或关闭此问题。 –