gpt4 book ai didi

html - 如何在不使用绝对定位的情况下*覆盖*在 flexbox 内居中的同级 div?

转载 作者:太空宇宙 更新时间:2023-11-04 13:16:03 24 4
gpt4 key购买 nike

See this plunker. 在不求助于绝对定位的情况下,使用 css flexbox 执行此操作的最有效方法是什么?

目前plunker代码如下:

CSS

 .container{
display: flex;
align-items: center;
justify-content: center;
border:4px dashed red;
height:600px;
width:80%;
}

.under{
background-color:yellow;
height:80% !important;
width:40% !important;
}

.over{
background-color:blue;
height:50%;
width:20%;
}

HTML

<body>
<div class='container'>
<div class='under'> Under - this should be in the center of the container </div>
<div class='over'>
<h3>Center overlay the blue div on top of the green!</h3>
</div>
</div>
</body>

最佳答案

为了。超过添加 margin-left: -100px;让它们叠加...但我不知道你为什么要这个...

关于html - 如何在不使用绝对定位的情况下*覆盖*在 flexbox 内居中的同级 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26171441/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com