元素文件的目的是使用 @keyframe 练习 CSS 动画以及在 Angular2 中显示一些不同的组件；我开始同时学习 CSS 和 Angular2。
问题是我在<app-root>中设置的标签顺序在 Web 浏览器上加载时不应用模板。 <contents>模板必须在中间，但它出现在 <bottomline> 下方.
<body> index.html 的标签有<app-root>只有瀑布背景图像也在这个文件中处理。
这是<app-root>的神殿.
<titlebar></titlebar>
<contents></contents>
<bottomline></bottomline>
所以 <contents>应该在中间但结果如下:
<titlebar>和 <bottomline>具有相同的结构；唯一的两个区别是 <div> 中的文本标签和类选择器的名称。
<div class="titlebar">
titlebar!
</div>
这是 titlebar.component.css .
div.titlebar{
width: 100%;
height: 50px;
margin: 0 0 0 0;
background: rgba(0, 0, 0, 0.55);
color: #fff;
}
body.component.html , .ts 中的选择器名称设置为 <contents> :
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
这个是body.component.css .我复制了.outer , .middle , 和 .inner本网站问题中的选择器将 <div> 居中标签。我不认为动画会造成问题；当我将动画代码设置为评论时，想法并没有变得更好。
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;}
.middle {
display: table-cell;
vertical-align: middle;}
.inner {
animation-duration: 3s;
animation-name: mainbox;
animation-iteration-count: 1;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 80%;
background: rgba(0, 0, 0, 0.55);
}
@keyframes mainbox{
from{
background: rgba(0, 0, 0, 0);
height: 0%;
}
to{
background: rgba(0, 0, 0, 0.55);
height: 80%;
}
}
以我的常识，没有理由 <contents>和 <bottomline>标签来切换位置。我错过了什么？
最佳答案
可能是因为 position: absolute - 为了测试它，将位置更改为 relative 或 inherent 或其他东西 - 这就是为什么发生是因为当你把某件事变得绝对时——你基本上是在把它从它的自然流动中拿走。把它想象成不仅把它拿出来，而且把它漂浮在上面 - 允许其他东西填充它后面的空间，这就是为什么你期望在它下面的元素 - 已经向上移动了。
关于css - HTML 中的组件对齐方式不符合我对齐的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42685462/