Position: fixed と指定すると要素が消えてしまう

Question

teratailを初めて使うので質問にミスが目立つかもしれないです。
また、プログラミング初心者です。

黒色の半透明の空間を作り、その中に四つの画像を表示したい のですが、 .SnS-account img で position: fixed;　を指定すると、黒色の空間で表示されていた四つの画像が消えてしまいます。

<div class="top">
  
  <div class="SnS-account">
      <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-transparent-square-blue-latest-0.png">
      <img src="https://www.freeiconspng.com/thumbs/youtube-logo-png/youtube-logo-picture-download-1.png">
      <img src="https://www.maxpixel.net/static/photo/1x/Turn-On-Structure-Button-Pinterest-Symbols-Icons-847279.png">
      <img src="https://i2.wp.com/wisdom.zirra.com/wp-content/uploads/2017/05/quora-logo.png">
   <div class="maine1">
     <div class="des-1">
       <span>運営アカウント - SNS</span>
     </div>
   </div>
  </div>
  
</div>

.top{
  background: url(https://images.unsplash.com/photo-1505820013142-f86a3439c5b2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80);
background-size: cover;
  height: 7590px;
background-repeat: no-repeat;
background-attachment: fixed;

  
}

.maine1{
  top: 1900px;
  height: 4000px;
  position: relative;
  display: flex;
  z-index: 0;
}

.maine1::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}

.des-1{
  font-family: 'Sylfaen';
  color: #33ffff;
  letter-spacing: 5px;
}
.SnS-account img{
  position: fixed;
  top: 1900px;
  height: 90px;
  float: left;
  z-index: 10;
}

初心者なりに色々調べたのですが、一切の解決方法がなくて困窮を極めています。
ご教示お願い致します。

Answer 1

position: fixed;は画面(ブラウザの表示画面)の左上を原点にして固定配置するということです。そこでtop: 1900px;を設定しているので、画面の上から1900px下の位置に表示されます。もし、画面の高さが1900px以上あれば表示されるでしょう。画面高以下のお好みの値を設定してください。
あるいは、bottomで下辺からの距離で指定することも可能です。

ただし、４つの画像がすべて同じ位置に重なって表示されるので、それぞれに、left(またはright)を適切に設定して重ならないように調整してください。