[英]How do I align bottom element above (not overlay) top element using css without changing the current HTML structure
I want to align the bottom element in an HTML file on top of the parent element, I do not want to overlay it, I literally want the bottom element to be on top of the top element:我想在父元素顶部对齐 HTML 文件中的底部元素,我不想覆盖它,我真的希望底部元素位于顶部元素的顶部:
Example: HTML:示例:HTML:
<div class="top-container"></div>
<div class="bottom-container"></div>
CSS: CSS:
.top-container {
width: 200px;
height: 200px;
background-color: green;
}
.bottom-container {
width: 200px;
height: 200px;
background-color: red;
}
Current Output:当前 Output:
Expected output: I want the red box to be above the green box.预期 output:我希望红框在绿框上方。
If you can wrap the two elements in a div, if they are not already wrapped, then in the container element, display: flex; flex-direction:column-reverse;
如果可以将两个元素包裹在一个div中,如果还没有包裹,那么在容器元素中, display: flex; flex-direction:column-reverse;
display: flex; flex-direction:column-reverse;
... if there's really no container element, your best bet is position: relative
on the bottom element and bottom: 400px
. ...如果真的没有容器元素,你最好的选择是position: relative
on the bottom element and bottom: 400px
。 They won't switch spots, but the red one will be ontop of the green one.他们不会交换位置,但红色的会在绿色的上面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.