html – CSS Flex堆叠项目彼此之上

概述参见英文答案 > Prevent flex items from rendering side to side                                    3个 我正在尝试放置一些< h1>< / h1>文本和来自Angular Material的电子邮件表单,进入< div>< / div>的中心具有彩色背景的部分.物品堆叠在一起,好像它们是层.电子邮件表单必须位于< 参见英文答案 > Prevent flex items from rendering side to side                                    3个
我正在尝试放置一些< h1>< / h1>文本和来自Angular Material的电子邮件表单,进入< div>< / div>的中心具有彩色背景的部分.物品堆叠在一起,好像它们是层.电子邮件表单必须位于< h1>< / h1>下方.标签.我能够正确对齐的唯一方法是使用position：flex,我怀疑这是潜在的原因.

这是我的HTML和CSS：

<div >  <h1 >    myTitle  </h1>  <md-input-container  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;}

有什么想法吗？

解决方法 您在h1上使用position：absolute将其从页面流中移除,并将其相对于其最接近的父级定位.所以其他元素不会在它周围流动.删除它.然后您的项目将并排显示,因为flex父项的默认flex方向是行.要垂直显示项目,请使用flex-direction：列,项目将在列中彼此堆叠而不是并排排列.

.top-section {  height: 350px;  background-color: #04041b;  align-items: center;  display: flex;  justify-content: center;  flex-direction: column;}.top-h1 {  color: #E8E8E8;  Font-size: 60px;}.email-form {  color: white;  Font-size: 30px;}

<div >  <h1 >    myTitle  </h1>  <md-input-container  color="accent">    <input mdinput placeholder="Email us" value="Your email address">  </md-input-container></div>

总结

以上是内存溢出为你收集整理的html – CSS Flex堆叠项目彼此之上全部内容，希望文章能够帮你解决html – CSS Flex堆叠项目彼此之上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。