How do I keep images always on top without using Z-Index?-CodePudding

I have a fairly simple website attached below. When hovering over an underlined word, there is an image that appears right at the position of the word.

The images are supposed to be always on top, no matter what. But the underlined words keep appearing on top of the images. (See code snippet). I know there must be something conflicting in the order of my elements! Please help, I am a bloody beginner.

I have tried to set a Z-Index, but that doesn't work at all.

I hope you understand my problem 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;
}

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

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

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

<!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 >
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span ><img   src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span >colorful rug<img  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 >broken down<img  src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin,_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>

CodePudding user response：

@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;
}

.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 >
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span ><img   src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span >colorful rug<img  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 >broken down<img  src="https://upload.wikimedia.org/wikipedia/commons/4/4a/CocooningⓒShin,_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>

CodePudding user response：

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

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