Html 将div元件放置在另一个固定在底部的元件上方

在这个Meteor客户端代码中；

id=feedback div

元素在

id=“result”

如何使

id=“feedback div”

元素的底部立即设置在

元素之上

* {
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4, footer {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

li {
    font-size: 1.25rem;
}

p {
    font-size: 1.5rem;
}


@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}
#header, input, footer, button, textarea, p {
    font-size: 1.5rem;
}
div#header {
    z-index: 1;
    width: 100%;
    position: fixed;
    top: 0;
    overflow: hidden;
    text-align: center;
    padding-top: 0.5rem;
    height: 3.5rem;
}
.busy {
    color: red;;
}
input, p {
    margin: 0.25em;
    padding: 0.25em;
}

footer {
    width: 99%;
    position: fixed;
    bottom: 1px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
}

button {
    border-radius: 1em;
    background-color: lightgray;
    margin: auto;
    text-align: center;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0.5em;
}

div#main {
    top: 3.6rem;
    position: absolute;
    width: 100%;
}
#login-div {
    z-index: 1;
    font-size: 1.5rem;
    text-align: right;
    padding: 0.5rem;
    top: 3.5rem;
    right: 0.5rem;
    position: fixed;
}
div#content {
    position: relative;
    top: 2rem;
    padding: 0.5rem;
}

input#plateNum {
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: uppercase;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: uppercase;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: uppercase;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: uppercase;
}
#plateNum {
    margin: 0;
}

.note {
    color: orange;
    font-size: smaller;
}
textarea#feedback {
    width: 100%;
}
p#result {
    height: 10rem;
    background-color: red;
}
ol {
    padding-left: 2rem;
}
#feedback-div {
    background-color: yellow;
}

{{>头}
{{>内容}
{{>反馈}
{{>页脚}
{{>结果}
{{{display.abcd}}}
{{{display.a}}}
{{{{display.b}}}}
{{{{display.c}}

{{{display.d}}
发送


清楚的
信息

过去，我使用垂直对齐将一个div置于另一个div之上。我应该说，我以前从未使用过Meteor，所以由于一些我可能不知道的原因，它可能不起作用。希望它对你有用

#feedback-div {
    background-color: yellow;
    vertical-align: bottom;
    display: inline-block; /* Or whichever inline/table display you'd prefer */
}

编辑：

我忘了提到垂直对齐仅适用于内联级别和表格单元格元素，因此有必要应用显示类型以使其工作，如我上面所示。我确认了这个信息。

这为我修复了它

div#反馈div{
位置：固定；
底部：12px；
}

我不太明白你的问题。你可以发布一个链接到演示这个问题的。对不起，我完全忘了提到垂直对齐只适用于内联级别或表格单元格元素。用

display:inline块试试看或任何您喜欢的显示类型，只要它符合这些参数。