ボックスの重なり

レスポンシブデザインのwebsite作成をしているところで、Tabletでのわからない点があるため、質問させていただきます。

下の画像を見ていただくとお分かりいただけると思いますが、blogの画像と「おしゃれEMAILに登録しよう」のボックスが重なってしまっています。

position配置のz-indexを指定した覚えもなく、両方ともinline-block要素です。

理想として、blogの画像を下に押し込んで、おしゃれEMAILのdivボックスを上に配置したいと考えています。

そして、これから.boxsidebar-rightにある空白にdivボックスをいくつか埋め込んでいこうと考えています。

しかし、今回のようにちゃんと埋め込むことができなかったりしています。

恐らく、.boxsidebar-rightの中のdivボックスの配置の仕方があまりよくないからだと思うのですが、もし、なにか、よりよい配置の仕方の改善方法があれば、教えていただけると幸いです。

質問
・blogの画像と「おしゃれEMAILに登録しよう」のボックスが重なってしまっているのはなぜか？改善するにはどうすればよいか？

・.boxsidebar-rightの中のdivボックスの配置の仕方をよりよくする(ボックスを追加しやすくする、見栄えをよくする)にはどうすればよいでしょうか？

大変恐縮ですが、ご回答いただけると幸いです。

念のため、websiteのURLも添付させていただきます。

URL

行動規範の内容に同意します

回答1件

ベストアンサー

改善点については、Nodeの順番などが変えれるかなどのできる範囲が分からないため現状で回答します。

修正方法について
CSSで以下の定義
-----補足------
Nodeの入れ替えができないという制約が付くものと仮定
mediaクエリ

screen and (max-width: 1024px) and (min-width: 768px)

親要素.boxsidebar-right>
position:relative;
子要素.email , .blog , .qrcode , .social に
position:absolute;
及び各要素にtopとleftの定義追加で調整

理由について
・.blog にふっている cssの設定
CSSのfloatで浮かした.blogの定義に対して、floatプロパティの無いemailが上層レイヤに着て見えるだけかと思います。
また、食い込んで見えるのは以下のような定義をしているため。divと孫要素imgどちらにも.blogが定義されている。
親要素のdivにもwidthとmarginがとられる。
孫要素のimgにもwidthとmarginがとられる。
ここで、.email(おしゃれに～)の要素は親要素divのwidthとmargin-leftの合計180pxの横幅として配置される。このときdivの孫要素imgのmarginと横幅分ズレが生じてしまい重なって見えている。

CSS
.blog{
    width: 150px;
    height: auto;
    float: left;
    margin-left: 30px;
    margin-top: 35px;
    display: inline-block;
}

HTML
<div class="blog">// div の 
 <a href="#">
  <img src="box img/box sidebar/blog.gif" alt="" class="blog">
 </a>
</div>