Позиция: абсолютная; Внизу: 0; Справа: 0; элемент перемещается, когда родительский div становится прокручиваемым с помощью overflow:auto;

Я добавляю несколько флип-карт, на которых есть значок >>, чтобы указать, что пользователь может щелкнуть по ним.

Я добавил «Позиция: абсолютная; Снизу: 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">&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>

Заранее благодарю за любую помощь.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

ваша проблема возникает из-за того, что «позиция: абсолютная» устанавливает ваши элементы относительно ближайшего родителя, который позиционируется (отличается от статического), вы хотите присвоить шеврону позицию относительно карты, но она находится внутри «.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>

Спасибо за вашу помощь, вы дали мне новую перспективу для достижения того, что я хочу.

P.R.1995 06.04.2022 09:56

попробуй так https://jsfiddle.net/c8eLmd4g/ Я изменил overflow: auto для класса .back на скрытый и добавил новый класс .content для тега p с overflow: auto

Другие вопросы по теме