css 样式问题 - 图片不向下滚动而文本向下滚动

Question

我的屏幕左侧有一个图像，我希望文本顺着图像在屏幕右侧向下排列。这有点已经是我所拥有的，但是文本只允许在鼠标悬停在段落上时向下滚动，而不仅仅是在页面或 window 上，这似乎让使用这个网站的人感到困惑。如果这没有意义，我很乐意拍摄一段短片来展示我的意思。任何人都知道如何解决这个问题？我希望图像始终保留在屏幕上，文本向下滚动，但可以通过向下滚动页面上的任何位置（而不仅仅是文本本身）来实现。


p {
    word-break: break-word;  
    text-align: right;
    color: white;
    font-size: 10vw;
    font-family: orpheuspro, serif;
    font-style: normal;
    align-items: center;
    line-height: 2.5;
    font-size: 30px;
    padding-right: 100px;
    padding-bottom: 90px;
    overflow: auto;
}

img {
    padding-left: 90px;
    border-image: linear-gradient(to bottom, black 0%, white 100%); 
}

.nav {
    padding-top: 30px;
    background-color: #91adc2;
    display:flex;
    flex-wrap:nowrap;
    margin: 0;
    width: 100vw;
    height: 100vh;
    padding-top: 100px;
}


  div {
      background-color: #91adc2 !important;
  }

<div class='nav'>
  <div>
  <img src='../../assets/img/face.png' alt="wj" /></div>
  <p>Welcome to my portfolio! 
  
 LONG PARAGRAPH HERE 
    </p>
</div>

Answer 1

p {
    word-break: break-word;  
    text-align: right;
    color: white;
    font-size: 10vw;
    font-family: orpheuspro, serif;
    font-style: normal;
    align-items: center;
    line-height: 2.5;
    font-size: 30px;
    padding-right: 100px;
    padding-bottom: 90px;
/*     overflow: auto; */
  
/*  set this to clear the image  */
    padding-left: 200px;
}

img {
    padding-left: 90px;
    border-image: linear-gradient(to bottom, black 0%, white 100%); 
   
    /* fixed position at all times */
    position:fixed;
}

.nav {
    padding-top: 30px;
    background-color: #91adc2;
    display:flex;
    flex-wrap:nowrap;
    margin: 0;
    width: 100vw;
    
    /* height: 100vh; */
    padding-top: 100px;
}




  div {
      background-color: #91adc2 !important;
  }

<div class='nav'>
  <div>
<!--   <img src='../../assets/img/face.png' alt="wj" /> -->
  <img src='https://www.w3schools.com/howto/img_avatar.png' alt="wj" width="100" class="avatar"/></div>
  <p>Welcome to my portfolio! 
  
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor tortor, mattis et venenatis et, fringilla eu sapien. Ut blandit maximus sapien, et pellentesque elit ullamcorper in. Sed mattis eros in quam posuere pharetra. Etiam aliquet mattis purus, et luctus ligula. Proin bibendum lectus sed lorem vestibulum vestibulum. Donec accumsan erat ex. Maecenas in tempor metus. Duis venenatis elit magna, sed tristique nisi sodales eget. Maecenas dignissim nisl massa, accumsan vehicula turpis elementum sit amet. Fusce mollis mi eget est egestas, nec luctus tellus mollis. Suspendisse vitae nulla semper, elementum lacus eget, sodales lectus. Quisque iaculis ipsum elementum, efficitur ex sit amet, efficitur erat. Aliquam erat volutpat. Sed imperdiet convallis urna id commodo.

Pellentesque erat nunc, congue in mattis sed, rutrum et felis. Etiam gravida fringilla mattis. Quisque vestibulum diam ex, tincidunt mattis metus efficitur eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla facilisi. Aenean mattis sapien est, in vulputate metus accumsan at. Phasellus maximus sit amet nisl id tincidunt.

Sed venenatis consectetur ex in blandit. Nam vestibulum convallis scelerisque. Vivamus eleifend nibh tortor, sit amet sollicitudin velit luctus quis. In eu justo sed lorem elementum elementum. Integer pellentesque augue ex, sit amet congue nibh eleifend eu. Vivamus ultrices purus in orci placerat, ornare efficitur elit fringilla. Nunc pretium, est sit amet tempor sodales, nibh nibh fermentum ipsum, in cursus felis neque ac odio. Mauris sit amet suscipit mi, eu gravida nibh. Pellentesque quis ornare enim, a tempus nisi. Nulla posuere odio molestie metus scelerisque, eget molestie augue efficitur. Integer eleifend metus quis urna tincidunt fringilla. Morbi nec neque sit amet ex hendrerit rutrum. Proin tellus magna, accumsan at purus quis, cursus commodo nibh.

Pellentesque pretium, massa eu pellentesque sollicitudin, sem neque ultricies leo, aliquet eleifend quam ipsum a tellus. Proin dictum mauris nunc, quis iaculis libero pharetra sit amet. Nam rhoncus porttitor ante maximus sollicitudin. In libero nisl, suscipit pretium velit ac, malesuada laoreet ex. Suspendisse sit amet enim mauris. Nulla ornare ex lectus, eu malesuada eros luctus vitae. Vivamus purus augue, ultricies at tristique ut, porttitor non tellus. Cras congue erat vitae condimentum volutpat. Quisque id leo posuere, tempus justo vel, egestas sapien. Proin ultrices turpis nec dui volutpat ultricies. Vivamus iaculis urna vel placerat tincidunt.

Quisque fringilla erat eu tellus elementum, at aliquet magna scelerisque. Sed ac felis semper, congue mi id, condimentum purus. Nulla scelerisque at nunc dapibus semper. Maecenas eget purus non quam tempor porttitor nec vitae diam. Suspendisse vel ligula ut justo hendrerit pharetra. Fusce nec lacus dignissim, molestie ligula ut, pharetra sapien. Donec eu velit ex. Nullam eu orci ut tortor condimentum dapibus nec at ante. 
    </p>
</div>

我会将 img 设置为 position: fixed; 然后调整文本上的 padding-left。

css 样式问题 - 图片不向下滚动而文本向下滚动

css styling issues - image doesn't scroll down while text does

html

css

alignment

flexbox