前提・実現したいこと
下の画像の左下にある、丸いimg要素を他の3つと同じ様な配置にしたいです。
発生している問題・エラーメッセージ
1つだけ要素の位置がずれてしまう。
該当のソースコード
HTML
1<div class="founding-members"> 2 <p><img src="https://isara.life/wp-content/themes/isara_v2/img/teacherbg.jpg" alt="founding-members-back-img"></p> 3 <p class="founding-members-p1"><span><i class="far fa-address-card"></i>創業メンバー</span><br>実際にフリーランスとして活躍しているエンジニアが立ち上げました。</p> 4 <div class="teachers"> 5 <div class="teacher"> 6 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/keisuke_someya.jpg" alt="keisuke"></p> 7 <p class="teacher-text">フリーランス講師<br><span>染谷 佳佑</span><br>ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、 8 外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。</p> 9 </div> 10 <div class="teacher"> 11 <p class="teacher-photo"><img src="https://isara.life/wp-content/uploads/2018/10/yuki.png" alt="yuki"></p> 12 <p class="teacher-text">フリーランス講師<br><span>成田 雄輝</span><br>バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、 13 自由歴だけは講師陣の中で最長です! 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください!</p> 14 </div> 15 <div class="teacher"> 16 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/shohey.png" alt="shohey"></p> 17 <p class="teacher-text">フリーランス講師<br><span>大滝 昇平</span><br>月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。 18 立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています!</p> 19 </div> 20 <div class="teacher"> 21 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/manabu.png" alt="manabu"></p> 22 <p class="teacher-text">フリーランス講師<br><span>坂内 学</span><br>アドバイザーとして参画しました。新卒で海外就職して11ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。 23 <br><br>お仕事はWebマーケティングとプログラミングが専門領域です。</p> 24 </div> 25 </div> 26 </div> 27</body>
CSS
1.founding-members img{ 2 width:100%; 3 margin-top:-337px; 4} 5.founding-members-p1{ 6 text-align:center; 7 line-height:70px; 8 position:relative; 9 top:-1250px; 10 font-weight:600; 11 color:#FFFFFF; 12} 13.founding-members-p1 span{ 14 font-size:28px; 15} 16.teachers{ 17 display:flex; 18 flex-direction:row; 19 flex-wrap:wrap; 20 width:900px; 21 position:relative; 22 left:100px; 23} 24.teacher{ 25 position:relative; 26 top:-1100px; 27 margin:-20px -90px; 28} 29.teacher-photo{ 30 height:200px; 31 width:200px; 32 display:inline-block; 33 z-index:2; 34 position:relative; 35 top:-320px; 36 left:300px; 37 flex-direction:row; 38} 39.teacher p img{ 40 border-radius:50%; 41 position:relative; 42 z-index:2; 43} 44.teacher-text{ 45 position:relative; 46 text-align:center; 47 width:270px; 48 height:270px; 49 border:solid 3px #FFFFFF; 50 display:inline-block; 51 color:#FFFFFF; 52 padding:50px; 53 line-height:26px; 54 } 55.teacher-text span{ 56 line-height:60px; 57}
試したこと
全角スペース等が入っていないか、確認しました。
補足情報(FW/ツールのバージョンなど)
!
↑
左下の画像の位置がもっと下になるイメージでやっています。
(この画像は全体を表示するために縮小して表示しているので、要素の位置が左に寄っています)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。