位置：绝对；底部：0；右：0；当父 div 使用 overflow:auto 变得可滚动时元素移动；

Question

我一直在添加一些翻转卡片，上面有一个 >> 以指示用户可以单击它们。

我添加了“位置：绝对；底部：0；右侧：0；”到 >> 以确保它位于 div 的正确角落。但是，我添加了“溢出：自动；”它包含 div 以适应移动设备上的显示。

当 div 中的内容变得太大并且实现了滚动条时，滚动会导致 >> 随之向上移动。

如果您能帮助我们将 >> 留在右下角，我们将不胜感激。

我的代码如下：

<style>
.card-container {
  margin: 20px;
  width: 100%;
  height: 300px;
}

.card {
  transition: transform 2s;
  transform-style: preserve-3d;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.front, .back {
  position: absolute;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
}

.front {
  border: 2px solid black;
  padding:15px;
}

.front:hover {
  bottom: 2px;
  left: 2px;
  box-shadow: 0px 0px 20px 1px #000;
}

.back {
  border: 2px solid black;
  padding:15px;
  transform: rotateY(180deg);
  overflow:auto;
}

.back:hover {
  bottom: 2px;
  right: 2px;
  box-shadow: 0px 0px 20px 1px #000;
}

.cards-flex-row {
  display:flex;
}

.cards-flip-chevron {
  font-size:40px;
  color:#008081;
  position:absolute;
  bottom:0;
  right:0;
  margin:15px;
}

@media (max-width: 767px) {

.cards-flex-row {
  display:block;
  }
  
 .card-container {
  width:auto;
  }

}

</style>

<div class="row">   
        <div class="col-md-12" itemprop="text">
            <div class="cards-flex-row">
                <div class="card-container">
                  <div class="card" onclick="flip(event)">
                    <div class="front">
                      <p><strong>Example Title</strong></p>
                      <p>Example Text</p>
                      <p class="cards-flip-chevron">&raquo;</p>
                    </div>
                    <div class="back">
                      <p>This is the part where when the text is too long and the box becomes scrollable, the double chevron moves with the scrollbar.</p>
                      <p class="cards-flip-chevron">&raquo;</p>
                    </div>
                  </div>
                </div>
            </div>
        </div>
</div>

<script>
function flip(event){
    var element = event.currentTarget;
    if (element.className === "card") {
    if(element.style.transform == "rotateY(180deg)") {
      element.style.transform = "rotateY(0deg)";
    }
    else {
      element.style.transform = "rotateY(180deg)";
    }
  }
};
</script>

在此先感谢您的帮助。

Answer 1

你的问题出现是因为“position: absolute”设置你的元素相对于最近的定位父元素（不同于静态），你想给雪佛龙一个相对于卡片的位置，但它在".back" 也是绝对定位的。

解决方案 1：在父级上使用“display:grid”进行重叠，并使用“grid-row:1;grid-column:1;”强制子级的位置（在他们两个上）这样人字形就会与卡片相关。

解决方案 2：去掉“.back”中的人字形，使其与“.card”相关而不是“.back”

尽管我认为解决方案 1 更好，但解决方案 2 更接近您的答案。所以我对你的代码做了一些修改，也许有用，给你：

<style>
*{box-sizing:border-box;}
.card {
  height: 300px;
  transition: transform 2s;
  transform-style: preserve-3d;
  cursor: pointer;
  width: 100%;
  height: 300px;
  border: 2px solid black;
}
.card.flipped .front{
  transform:rotateY(180deg);
}
.card.flipped .back{
  transform:rotateY(0deg);
}

.front, .back {
  position: absolute;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  transform:rotateY(0deg);
  transition:.5s;
  height: 100%;
  padding:15px;
}

.back {
  transform: rotateY(180deg);
  overflow:auto
}

.cards-flip-chevron {
  font-size:40px;
  color:#008081;
  position:absolute;
  bottom:0;
  right:0;
  margin:15px;
}
</style>

<div class="card" onclick="flip(event)">
  <div class="front">
    <p><strong>Example Title</strong></p>
    <p>Example Text</p>
  </div>
  <div class="back">
    <p>
      This is the part where when the text is too long and the box becomes scrollable, the double chevron moves with the scrollbar.
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <p class="cards-flip-chevron">&raquo;</p>
</div>
<script>
function flip(event){
  var element = event.currentTarget;
  element.classList.toggle('flipped');
};
</script>

Answer 2

这样试试 https://jsfiddle.net/c8eLmd4g/ 我已经将 class .back 的 overflow: auto 更改为隐藏，并为带有 overflow: auto[=15= 的 p 标签添加了新的 class .content ]

位置：绝对；底部：0；右：0；当父 div 使用 overflow:auto 变得可滚动时元素移动；

Position: absolute; Bottom: 0; Right: 0; element moving when parent div becomes scrollable using overflow:auto;

html

css

position