position:relativeを使った時にできる空白を埋められない件

Question

position:relativeを使った時にできる空白が埋められない件

初めてのサイト模写の途中で行き詰まってます。
「position:relative」を使って、プロフィール画像の横に、名前とSNSアイコンを配置しました。するとプロフィール画像とプロフィール文との間に、空間が・・・。
marginなどをいじってもうまくいかなくて困っています。どうしたらいいか教えていただけないでしょうか？

以下に関係がありそうな部分のHTMLとCSSを貼っておきます。よろしくお願いします。

<low-wrapper>
      <div class="container">
        <div class="infomation profile">
          <img src="images/profile.png" alt="">
          <h3>John Michels</h3>
          <div class="sns-icon">
            <span class="fab fa-twitter"></span>
            <span class="fab fa-facebook-f"></span>
            <span class="fab fa-instagram"></span>
          </div>
          <p class="text-content">これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
        </div>
        <div class="infomation latest-post">
          <h4>最近の投稿</h4>
          <div class="post">
            <a href="#">書くためのテーマ</a>
            <p>2018年9月1日</p>
          </div>
          <div class="post">
            <a href="#">画像付きの投稿</a>
            <p>2018年3月5日</p>
          </div>
          <div class="post">
            <a href="#">引用付きの投稿</a>
            <p>2018年3月5日</p>
          </div>
        </div>
        <div class="infomation category">
          <h4>カテゴリー</h4>
          <a href="#">サンプル投稿</a>
          <a href="#">投稿フォーマット</a>
          <a href="#">普通の投稿</a>
        </div>
        <form id="form1" action="自分のサイトURL">
          <input id="sbox"  id="s" name="s" type="text" placeholder="キーワードを入力" />
          <input id="sbtn" type="submit" value="検索" />
        </form>
      </div>
    </low-wrapper>

.infomation {
  margin-top: 70px;
}

.profile h3 {
  position: relative;
  top: -95px;
  left: 140px;

}

.profile img {
  position: relative;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
}

.sns-icon {
  color: #999;
  display: inline-block;
  position: relative;
  top: -100px;
  left: 160px;
  font-size: 20px;
}

.fab {
  padding: 0px 5px;
}

.text-content {
  padding-top: 0px;
  display: block;
}

.latest-post h4, .category h4
 {
  color: #333;
  font-size: 14px;
}

.post a, .category a {
  color: #666;
  font-size: 17px;
}

.post a:hover, .category a:hover {
  color: #ffd700;
  transition: all 0.15s ease-in-out;
}

.post p {
  color: #999;
  font-size: 15px;
}

.category a {
  display: block;
  margin: 15px 0px;
}

.infomation input {
  display: inline-block;
}

low-wrapper .container {
  padding-bottom: 60px;
  border-bottom: 1px solid #999;
}

Answer 1

やりたいことはこういうことですか？

.profile {
  position:relative; /* div要素を基準にする */
}

.profile h3 {
  position: absolute; /* 基準となったdiv要素の位置を参考にして絶対位置を決める */
  top: 30px; /* div要素の上から30px */
  left:140px; /* div要素の左から140px */
}

.profile img {  /* relative必要なさそうだったから削除 */
  border-radius: 50%; 
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
}

position系の参考サイト

---

コメントから追記

.profile {
  position:relative; 
}

.profile h3 {
  position: absolute; 
  top: 30px; 
  left:140px; 
}

.profile img {  
  border-radius: 50%; 
  width: 100px;
  height: 100px;
  top: 10000px;
  left: 100000px; 　/* 別に効いてない */
}

さきほどの回答したコードは手抜きでtop,leftを消してなかっただけです。

imgタグにもし position:absoluteをつけるとどうなるかわかりますでしょうか。

position:absolute をすると、その要素の高さが無視されるので、こうなります。

.profile {
  position:relative; 
}

.profile h3 {
  position: absolute; 
  top: 30px; 
  left:140px; 
}

.profile img {  
  position:absolute; /*  絶対位置を指定してみた*/
  border-radius: 50%; 
  width: 100px;
  height: 100px;
  top: 0px;
  left: 00px;
}

---

こうなってしまう理由は、position:absoluteを使うと他の要素は absoluteを指定した要素の高さの影響を受けなくなるからです。
⇒だから横に重ねられるんですねー。　まぁabsoluteを使うと要素が『浮く』んだと思ってもらうのがわかりやすいかもしれません。

では、逆に今回質問者さんが困っていた position:relativeの隙間問題を応用するとこんなこともできます。

.profile {
  position:relative;
}

.profile h3 {
  position: absolute; 
  top: 30px; 
  left:140px; 
}

.profile img {  
  position:relative; 　/* relativeを指定してみた */
  border-radius: 50%; 
  width: 100px;
  height: 100px;
  top: 150px; /* 元居た位置から150pxずらす */
  left: 150px; /* 元居た位置から150pxずらす */
}

要素(imgタグ)の高さを維持したまま場所が移動してうさちゃんが移動しましたーカワイイー

自分でいろいろ変えてみると理解が深まると思います。

興味があるうちに色々いじってみましょうー

Comments

[azuapricot]

position relativeだと隙間がどうしても埋まらなかった理由としては、
F12を押すとでてくるディベロッパーツールを使えばわかるのですが、

<h3>タグ分の高さがそのまま残ってしまっているからですね。
relative は使い方を理解していないで適当に使うとまずうまくいかないので
きっちり理解してから使いましょう

[shinjia305]

そうです、ありがとうございます！あれー・・・シンプルなコードですね。

うーむむ…「div要素を基準にする」っていうのは、relativeで基準にできるってことですもんね。
はー、profileを基準にすれば良いってことですか！なるほど、やってみます！

[azuapricot]

position関係ちょっといじっただけですからねー。

要素をどこかの横に配置したいときは、position:relativeじゃなくて、position:absoluteを使った方がやりやすいと思います。
(複数横に並べたりするときはdisplay:flexとかの方がいい場合もありますけれども）

[shinjia305]

ちょっとわからないのが、なんでimgの方にabsoluteが入らないんですかね？
imgタグもh3タグもprofileの要素だから、どっちもabsolute指定しないと、って思うんですけど、違いますか？
imgタグのtopとleftがなんで効くのかなって思いました。ごめんなさい、たくさん聞いてしまって！

[shinjia305]

とりあえず、もう一度relativeとabsoluteの使い方を調べたいと思います！ありがとうございます！

[azuapricot]

参考になるかはわかりませんが追記しましたので暇なときにでも眺めておいてください

[shinjia305]

うわー、丁寧にすいません、ありがとうございます！また見させてもらいます！