I have been adding some flip cards that include a >> on them to indicate that the user can click them.

I have added "Position: absolute; Bottom: 0; Right: 0;" to the >> to ensure it sits in the correct corner of the div. However, I have added "overflow:auto;" to it's containing div to accommodate the display on mobile devices.

When the content inside the div becomes too large and the scroll bar gets implemented, scrolling causes the >> to move up with it.

Any help on getting the >> to stay in the bottom right corner would be much appreciated.

My code is as follows:

<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 >   
        <div  itemprop="text">
            <div >
                <div >
                  <div  onclick="flip(event)">
                    <div >
                      <p><strong>Example Title</strong></p>
                      <p>Example Text</p>
                      <p >&raquo;</p>
                    </div>
                    <div >
                      <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 >&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>

Thanks in advance for any help.

CodePudding user response：

your problem arises because "position: absolute" sets your elements with respect to the closest parent that is positioned (different than static), you want to give the chevron a position relative to the card, but it is inside the ".back" and that is also positioned as absolute.

Solution 1: do the overlapping using "display:grid" on the parent and forcing the position of the childs with "grid-row:1;grid-column:1;" (on both of them) so that the chevron will relate to the card.

Solution 2: take the chevron out of the ".back" so that it relates to ".card" instead of ".back"

Even tho I think solution 1 is better, solution 2 is closer to your answer. so I did some medifications to your code, maybe is useful, here you go:

<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  onclick="flip(event)">
  <div >
    <p><strong>Example Title</strong></p>
    <p>Example Text</p>
  </div>
  <div >
    <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 >&raquo;</p>
</div>
<script>
function flip(event){
  var element = event.currentTarget;
  element.classList.toggle('flipped');
};
</script>

CodePudding user response：

try like this https://jsfiddle.net/c8eLmd4g/ I have changed the overflow: auto for class .back into hidden and added the new class .content for the p tag with overflow: auto