枠線に画像を載せたい

Question

https://isara.life/
↑現在こちらを模写中です。
枠線の上に画像をかぶせる方法が知りたいですお願いします。

imgにposirion relative top -160px
をすると↓

のようにスペースが生まれてしまいます。
よろしくお願いします

<div class="member">
      <div class="member__heading">
        <h1><i class="far fa-address-card"></i>創業メンバー</h1>
        <p>実際にフリーランスとして活躍しているエンジニアが立ち上げました</p>
      </div>
      <div class="member__box">
        <div class="item">
          <img class="item-img" src="./isaraimages/keisuke_someya.jpg" alt="keisuke someya">
          <div class="item__heading">
            <p>フリーランス講師</p>
          </div>
          <div class="item__heading">
            <p>染谷　康佑</p>
          </div>
          <div class="item__sentence">
            <p>ISARA「THAILAND」CO.LTDの</p>
            <p>代表です。学生起業の後にリクルー</p>
            <p>とへ就職。その後独立し、海外移住</p>
            <p>しました。今はフリーランスとして</p>
            <p>リモートワークで日本円を稼ぎ、外</p>
            <p>国通貨に変えて使い、海外を旅して</p>
            <p>ます。営業、ブログPVアップ（最高</p>
            <p>月間150万PV）ビジネス構築が専</p>
            <p>門です。</p>
          </div>
        </div>
        <div class="item">
          <img class="item-img" src="./isaraimages/yuki.png" alt="yuki narita">
          <div class="item__heading">
            <p>フリーランス講師</p>
          </div>
          <div class="item__heading">
            <p>成田　雄輝</p>
          </div>
          <div class="item__sentence">
            <p>バンコクのシェアハウスのオーナー</p>
            <p>をやりながら一年の大半をタイで過</p>
            <p>ごしています。大学時代から今に至</p>
            <p>るまでネットだけで生計を立ててい</p>
            <p>るので、自由歴だけは講師陣の中で</p>
            <p>最長です！母親がタイ人という事も</p>
            <p>ありタイには精通しておりますので、こ</p>
            <p>ちらでの生活のサポートはお任せく</p>
            <p>ださい！</p>
          </div>
        </div>
        <div class="item">
          <img src="./isaraimages/shohey.png" alt="keisuke someya">
          <div class="item__heading">
            <p>フリーランスエンジニア</p>
          </div>
          <div class="item__heading">
            <p>大滝　昇平</p>
          </div>
          <div class="item__sentence">
            <p>月の半分は東京の会社にリモートで</p>
            <p>勤めつつ、フリーでも活動している</p>
            <p>エンジニアです。Laravel・</p>
            <p>WordPressでのWeb制作がコアス</p>
            <p>キル。立ち上げメンバーとしてカリ</p>
            <p>キュラム原案制作に参画し、現在は</p>
            <p>外部アドバイザーをしています！</p>
          </div>
        </div>
        <div class="item">
          <img src="./isaraimages/manabu.png" alt="sakauchi manabu">
          <div class="item__heading">
            <p>フリーランスエンジニア</p>
          </div>
          <div class="item__heading">
            <p>坂内　学</p>
          </div>
          <div class="item__sentence">
            <p>アドバイザーとして参画しました。</p>
            <p>新卒で海外就職して１ヶ月後に退<p>
            <p>職。今は日本にいたり海外にいたり</p>
            <p>でゆるくフリーランスをしていま</p>
            <p>す。</p>
            <p>お仕事はWebマーケティングとプロ</p>
            <p>グラミンぐが専門領域です。</p>
          </div>
        </div>
      </div>
    </div>

.member {
  text-align: center;
  background-image: url("../isaraimages/ushirosugata.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  color: white;
  width: 100%;
  padding: 40px 0; }
  .member::before {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ''; }
  .member__heading h1 {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 30px; }
  .member__heading p {
    padding-bottom: 40px; }
  .member__box {
    width: 65%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto; }

.item {
  margin: 0;
  padding: 0;
  width: 45%;
  height: auto;
  border: 4px solid white;
  margin-top: 160px; }
  .item .item-img {
    width: 200px;
    height: 200px;
    border-radius: 50%; }
  .item__heading {
    line-height: 1; }

Comments

[y_waiwai]

スペースとはどれのことをいってますか？

[yoshinavi]

「posirion:relative;」は元の位置にスペースが確保されます。
確認してみてください。

Answer 1

提示のCSSのimg に margin-top: -160px; を追加するだけで、うまくいきましたよ。

.item .item-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-top: -160px;
}

提示のHTMLですが、リンク先の内容をそのままコピーしたもののようですが、著作権法上、まずくないですか。（法律には詳しくないですが）内容はオリジナルなものに変更したほうがいいように思います。