html - 如何在 flexbox 中分层形状

Question

我目前正在使用 this solution为我使用而修改 case specifically here .当我最初看到这个设计时，我想我会在一个 flexbox 容器中制作两个 div，右边的 div 将在右边的上面 z 索引。像...

    .container {
      display: flex;
      width: 200px;
      flex-direction: row;
    }

    .left-side {
      flex: 4;
      background-color: red;
    }

    .right-side {
      flex: 1;
      background-color: orange;
      z-index: 3;
      border-style: 2px solid white;
      border-radius: 50%;
    }

<div class="container">
      <div class="left-side">
        View Cart
      </div>
      <div class="right-side">
        3
      </div>
    </div>

这根本不会将我的元素层叠在一起，因为它们彼此相邻放置。 所以我的问题是:

我怎样才能使用分层布局，同时仍然利用所有漂亮的定位 flexbox 允许没有我一起破解的绝对位置/相对位置解决方案？或者，这个位置绝对/相对是解决我的问题的正确方法吗？

Answer 1

您可以将红色背景应用于容器，并使用 transform: translateX(50%) 将橙色圆圈移到容器外的一半位置以实现该效果。

.container {
  display: flex;
  width: 200px;
  flex-direction: row;
  background: red;
  position: relative;
  color: white;
}

.container:before {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  content: '';
}

.container:before,
.count {
  border: 2px solid white;
}

.left-side {
  flex-grow: 1;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.count {
  width: 50px;
  height: 50px;
  background-color: orange;
  border-radius: 50%;
  transform: translateX(50%);
}

<div class="container">
  <div class="left-side center">
    View Cart
  </div>
  <div class="right-side">
    <div class="count center">3</div>
  </div>
</div>