Question

0

176

Views

How do I prevent elements with absolute position from overflowing?

I have attached a simple code snippet for a website. When hovering over the underlined words, images are supposed to appear. How can I prevent those images from "jumping out" of their container so that they will always be visible and don't leave the screen?

The images are supposed to appear at the position of the correlating word.

I hope you understand the problem I've described here.

@charset "UTF-8";
/* CSS Document */

html, body {
    margin: 0;
    background-color: black;
}

#wrapper {
    margin: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: left;
    position: relative;
}

p {
    color: white;
    font-family: Helvetica, sans-serif;
    font-size: 36px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: left;
    display: block;
    width: 50%;
}

.gallery-image {
    position: absolute;
    display: none;
    transform: translate(0,calc(1em - 50%));
  max-width: 50vw;
    max-height: 75vh;
    height: auto;
z-index: 1000;
}

.gallery-link {
  position: relative;
  text-decoration: underline;
}

.gallery-link:hover > .gallery-image{
    display: flex; 
z-index: 1000; 
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
    
<div class="section">
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span class="gallery-link"><img  class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br>
End Quote
</p>
</div>          
</div>  

</body>
</html>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T12:20:44.495Z

You can try to modify your .gallery-image with top and remove transform too. Your final CSS will be like this

.gallery-image {
   position: absolute;
   display: none;
   max-width: 50vw;
   max-height: 75vh;
   height: auto;
   z-index: 1000;
   top: 100%; /*Here is the main change*/
 }

You can check the sandbox here https://jsfiddle.net/kqoh2Lat/

The final result

0

176

How do I prevent elements with absolute position from overflowing?

1 answers

0

Find remote jobs

Andres GPT