文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使flex项重叠

问如何使flex项重叠
EN

Stack Overflow用户

提问于 2022-09-05 12:17:05

回答 2查看 167关注 0票数 1

我的文档当前看起来是这样的：https://i.stack.imgur.com/VeUFo.png，但是我希望圆圈像下面这样重叠方框：https://i.stack.imgur.com/99I6s.png

我该怎么做？

代码：

<body class="bg-black">
    <div class="flex flex-col items-center md:flex-row md:justify-center gap-0">
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
        <div
            class="w-24 h-24 font-bold rounded-full text-white border-white border-2 border-opacity-30 flex items-center justify-center">
            OR</div>
        <div
            class="w-80 h-52 bg-black border-white border-2 border-opacity-30 rounded-lg flex flex-col justify-center items-center gap-4">
        </div>
    </div>
</body>

html

css

frontend

tailwind-css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-05 12:25:41

您可以尝试在“或”div中添加负边距。注意，您必须增加z-index，并设置一个背景颜色，以达到预期的结果。

可以将这些类附加到class属性中：

... -mx-4 z-10 bg-black

您可以在这个顺风操场中直接检查结果。

票数 1

Stack Overflow用户

发布于 2022-09-05 12:34:49

您可以使用“绝对”定位来实现这一点。

.box{
  display: flex;
  position: relative;
}
.box1{
  margin-right: 10px;
}
.box1, .box2{
  height: 200px;
  flex: 50% 0 0;
  border: 5px solid black;
}
.or{
  position: absolute;
  top: 30%;
  bottom: 50%;
  left: 45%;
  height: 80px;
  width: 80px;
  border-radius: 80px;
  border: 5px solid black;
  background-color: black;
  color: white;
  text-align: center;
  vertical-align: center;
  line-height: 80px;
}

<body>
<div class="box">
<div class="box1">
</div>
<div class="box2">
  
</div>
<div class="or">
OR
</div>
</div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73609230

复制

相似问题

问如何使flex项重叠
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使flex项重叠EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使flex项重叠
EN