Я добавляю несколько флип-карт, на которых есть значок >>, чтобы указать, что пользователь может щелкнуть по ним.
Я добавил «Позиция: абсолютная; Снизу: 0; Справа: 0;» к >>, чтобы убедиться, что он находится в правильном углу div. Однако я добавил "overflow:auto;" чтобы он содержал 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">»</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">»</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>
Заранее благодарю за любую помощь.
ваша проблема возникает из-за того, что «позиция: абсолютная» устанавливает ваши элементы относительно ближайшего родителя, который позиционируется (отличается от статического), вы хотите присвоить шеврону позицию относительно карты, но она находится внутри «.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">»</p>
</div>
<script>
function flip(event){
var element = event.currentTarget;
element.classList.toggle('flipped');
};
</script>
попробуй так
https://jsfiddle.net/c8eLmd4g/
Я изменил overflow: auto
для класса .back
на скрытый и добавил новый класс .content
для тега p с overflow: auto
Спасибо за вашу помощь, вы дали мне новую перспективу для достижения того, что я хочу.