Как показать div top относительно контекста стека - PullRequest
Новая
       106

Как показать div top относительно контекста стека

1 голос
/ 19 марта 2020

То, чего я хочу достичь, просто. Когда карта перевернута, div «conTent» (с черным цветом) может быть сверху всех остальных div «cardFront» (с красным цветом). Я знаю, что вы не можете использовать zindex здесь, потому что они имеют разный контекст стека, поэтому я думаю, что я должен использовать div "cardBack" и "cardFront", потому что у них обоих есть атрибут transform, который делает их стековыми элементами контекста. Но это немного сложно, поскольку речь идет о «cardBack» и «cardFront», которые принадлежат другому элементу контекста с более высоким стековым значением «flipper». Так что я запутался, что на самом деле зависит последовательность шоу, это уровень контекста стека? Могу ли я установить уровень вручную? Прямо сейчас кажется, что последовательность 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>
...