javascript - 如何显示有关堆叠上下文的 div 顶部

Question

我想要实现的很简单。翻转卡片时，“内容” div（黑色）可能位于所有其他“cardFront” div（红色）的顶部。

我知道你不能在这里使用 zindex，因为它们有不同的堆叠上下文，所以我认为我应该关注 div "cardBack" 和 "cardFront"，因为它们都有 transform 属性，这使得它们成为堆叠上下文元素。但它有点复杂，它是关于属于不同更高堆叠上下文元素“flipper”的“cardBack”和“cardFront”。

所以我很困惑，真正取决于显示顺序的，是堆叠上下文的级别吗？我可以手动设置级别吗？现在似乎是 DOM 序列决定的。和中间的卡片一样，当它被翻转时，“内容”在前一个“cardFront”之上，但在下一个“cardFront”之下。

我使用了一种设置不同显示模式的方法，一些博客说 inline-block 比 block 具有更高的级别，但似乎不起作用。所以我真的需要一些帮助，谢谢！

const root = document.querySelector("#root");


class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {

    return ( 
      <div className = "flipperContainer" >
        <div className = "flipper" >
          <div className = "cardFront" >
          </div> 
          <div className = "cardBack" >
            <div className = "conTent" >
            </div>
          </div>
        </div>
      </div>
    )
  }
}
class CardContainer extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (  
      <div className = "flex" >
        <Card / >

        <Card / >

        <Card / >
      </div>
    )
  }
}

ReactDOM.render( < CardContainer / > , root);

.flipperContainer{
  -webkit-perspective: 1000px;
  perspective: 1000px;
  width: 70px;
  height: 250px;
  position: relative;
  margin: 0 auto;
}

.flipperContainer:hover .flipper,
.flipperContainer.hover .flipper {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipper {
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border-radius: 35px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
}


/* hide back of pane during swap */

.cardFront,
.cardBack {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* front pane, placed above back */

.cardFront {
  display:block
  width: 70px;
  height: 250px;
  position: relative;
  margin: 0 auto;
  z-index: 99;
  background-color: red;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.cardBack {
  display:inline-block;
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  background-color: green;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.conTent {
  display:inline-block;
  position: absolute;
  top: 50%;
  width: 500px;
  height: 100px;
  background-color: black;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

标签： javascriptcssz-indexcss-transformsdisplay