Question

我试图在右上角固定一个圆形标签。顺便说一下它被剪裁了：

这是我的HTML

<div class='row'>
  <div class='product'>
    <div class='discount'>
      <span class='green'>
        40%
      </span>
    </div>
    <div class='product_header'>
      10 luglio
    </div>
    <div class='product_inner'>
      <img src='https://images-na.ssl-images-amazon.com/images/I/61eHXu2AgXL._SL1000_.jpg' width='300'>
      <p>Nike Air (Women)</p>
      <p>Size 7</p>
      <p class='price'>
        Price £199.99
      </p>
      <button>guarda offerta</button>
      <button>Storico prezzi</button>
    </div>
    <div class='product_overlay'>
      <h2>Added to basket</h2>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>

这里是CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700;
}

.row {
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}

.product {
  box-shadow: 1px 5px 15px #CCC;
  background-color: white;
  width: 15em;
  height: auto;
  padding: 2em;
  margin: 1em;
  overflow: hidden;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}
.product .discount {
  position: absolute;
  right: -10px;
  top: -10px;
}
.product .discount span.green {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #5EA226;
  width: 3em;
  height: 3em;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2em;
}
.product img {
  max-width: 100%;
  height: auto !important;
  text-align: center;
}
.product_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
}
.product_inner p {
  color: black;
}
.product_inner .price {
  color: red;
  font-size: 2em;
}
.product_inner button {
  border: 1px solid black;
  color: #000;
  font-size: 1em;
  border-radius: 3px;
  padding: 0.5em 3em;
  margin: 1em 0 0 0;
  background: none;
  cursor: pointer;
  -webkit-transition: background ease-in .25s;
  transition: background ease-in .25s;
}
.product_inner button:hover {
  background: rgba(255, 255, 255, 0.5);
  color: green;
}
.product_inner button:before {
  font-family: FontAwesome;
  content: '\f07A';
  color: #000;
  position: absolute;
  font-size: 1.5em;
  margin: 0 -1.5em;
}
.product_inner button:hover:before {
  color: green;
}
.product_overlay {
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-500px);
          transform: translateY(-500px);
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
      flex-flow: column wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.product_overlay h2 {
  color: rgba(43, 45, 66, 0.7);
  font-size: 1.2em;
  margin: 1em 0;
}
.product_overlay i {
  color: rgba(43, 45, 66, 0.7);
  font-size: 1.5em;
}

裁剪标签位于最上方的角落，我尝试使用z-index，但我不明白这是什么问题......

我还有codepen

Answer 1

改变这个：

.product{
    box-shadow: 1px 5px 15px #CCC;
    background-color: white;
    width: 15em;
    height: auto;
    padding: 2em;
    margin: 1em;
    overflow: hidden;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    }

到此：

.product{
    box-shadow: 1px 5px 15px #CCC;
    background-color: white;
    width: 15em;
    height: auto;
    padding: 2em;
    margin: 1em;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    }

圆形按钮被裁剪，为什么z-index不起作用？

1 个答案: