如何使用CSS将两个或多个元素堆叠到右侧

我想让我的标题元素堆叠在屏幕的右侧（H1元素和H2元素就在它下面）。我刚刚开始掌握CSS的窍门，所以请耐心听我说。尝试在线搜索解决方案，但仅在存在单个元素时才能找到答案

无论如何，这就是现在屏幕上页面的样子：

蓝色的“我们帮助人们和企业”是H1元素。白色“实现今天的目标和明天的愿望”是H2元素。这两个标题元素都嵌套在一个DIV中

当前CSS代码如下所示：

.hero01_content-div {
  margin-top: 400px;
}

.hero01_content-head-test-main {
  position: relative;
  width: 600px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px 15px;
  float: right;
  background-color: #0080c7;
  font-family: Lato, sans-serif;
  color: white;
  text-align: right;
}

.hero01_content-subhead-test-main {
  position: relative;
  width: 500px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 10px 15px;
  float: right;
  background-color: white;
  font-family: Lato, sans-serif;
  color: #ec008c;
  text-align: right;
}

如何使H2元素堆叠在H1元素的正下方，而这两个元素都位于右侧？我将感谢任何帮助。先谢谢你

---

可以在此处找到演示上述内容的代码笔：

您需要将

float:right

设置为父容器，并从heading元素中删除float属性，因为它会将其从正常流中移除

.hero01\u content-div{
边缘顶部：400px；
浮动：右；/*已添加*/
}
.hero01_内容-head-test-main{
位置：相对位置；
宽度：600px；
边际上限：0px；
边缘底部：0px；
填充：5px15px；
背景色：#0080c7；
字体系列：拉托，无衬线；
颜色：白色；
文本对齐：右对齐；
}
.01_内容-分目-测试-主要{
位置：相对位置；
宽度：500px；
边际上限：0px；
边缘底部：0px；
填充：10px 15px；
浮动：对；
背景色：白色；
字体系列：拉托，无衬线；
颜色：#ec008c；
文本对齐：右对齐；
}

我们帮助人们和企业
实现今天的目标和明天的愿望

好的，您需要删除

.hero01_content-div {
margin-top: 400px;
float: right;
}

然后换这些

.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}

.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}

---

请创建您当前拥有的演示。这是上面@kfreeman04208的代码笔这是上面@ManojKumar的代码笔你说的@ManojKumar是什么意思。在这种情况下，H2元素肯定需要在H1元素的正下方。如果我改变这些元素的顺序，H2元素不会在H1元素之上吗？