Question

我目前正在使用this solution进行修改以供我使用case specifically here。当我最初看到设计时，我想我会在一个flexbox容器中制作两个div，右边的div将在右边的那个上方索引。有点像...

    .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>

Answer 2

负边距

您可以使用负边距来解决问题，而无需使用位置绝对/相对解决方案。

    .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%;
      margin-left: -60px;
      text-align: center;
    }

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

如何在flexbox中对图形进行分层

2 个答案: