要素が重なるので重ならないようにしたいです。

Question

前提・実現したいこと

要素が重ならないようにしたいです。

発生している問題・エラーメッセージ

現在レスポンシブサイトの上部にボックスを作り、overflow:scroll;でw310px*h60px程のボックスを作り新着情報を手動更新しています。
手動更新を無くすために元々サイトと同時更新していたTwitterのタイムラインを埋め込むこととなりました。
幅は310pxのままなのですがタイムラインを綺麗に表示させるためにheightを伸ばすこととなりました。

デスクトップ画面では重ならずそのままの位置で差し替えれたのですがスマホ版に切り替えるとそのすぐ下にある画像に被ってしまいます。

サイト全体は私ではない人間が作成しており、差し替えてほしい。とだけ言われたので必要最低限に、あまりCSSもいじくりたくないのですが、恐らくスマホ版のstyleでは殆どの要素の位置をtopを使って決めているのが原因かなとおもっています。

レスポンシブサイトを作ったことがないためわからないのですがスマホ版ではtopで位置を決めるのでしょうか。

該当のソースコード

現在ざっくりとこのような状態です。

<style>
@media screen and (max-width:600px) {
.foam{
  top: 100px;
}

.box_twitter{
　overflow: clip;
  height:280px; 

}

.a_contents{
  top: 200px;
}

.b_contents{
  top: 250px;
}

.c_contents{
  top: 300px;
}
}

</style>

<div class="foam">
 <div class="box_twitter">Twitter埋め込みソース</div>
</box>

<div class="a_contents">
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
</div>

<div class="b_contents">
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
</div>

<div class="c_contents">
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
<a class=""><img src="#"></a>
</div>

もっと複雑なのですが気になる部分はこのような感じです。
.foamの高さが220pxも伸びたため.foamが.a_contentsと.b_contentsに被っています。

試したこと

marginの設定など。
topの値をズラすのがいいとはおもうのですが共通のクラスがほかのページに使用されていたりが気になります。

今後コンテンツを追加していく可能性があるようですがそのたびに一つ一つの要素の位置をtopを触りズラしていかなければなりませんか。
topの高さを変更していく以外に重ならないようにする方法はありますでしょうか。

topで設定されている限り難しいのでしょうか。元々このページを作成した方にも確認が取れない状況です。よろしくお願いいたします。

追記

かなり大雑把ですみません。
・現在(元々)のページの様子
・変更後のページの様子
・こうしたいページの様子です

@media screenの前というのはsp用ではなくpc用のstyleの.form .a_contents .b_contents .c_contents部分のcssでしょうか。
ソースを確認したところ、position: absolute;が使われておりました。

Comments

[yambejp]

いまの想定外の状況と希望する結果を図示してください

[hatena19]

@media screen の前のCSSも提示してください。top を使っているということは position: absolute を使っているんですよね。

[Lhankor_Mhy]

結構ひどいコードだと思います。
topを触りたくないなら、ページ全体を position: absolute を使わないレイアウトに変更するしかないように思います。

Answer 1

該当するhtmlが今ひとつはっきりとわからないので
恐らくになりますが、@media screen and (max-width:600px)のときに
.foam .a_contents .b_contents .c_contents のpositionをstaticにしてみて下さい。

.foam,.a_contents,.b_contents,.c_contents{
  position:static;
}

これでどのように変化するか、一度お試しいただいてもよろしいでしょうか？？

Comments

[ojreee]

ありがとうございます！
試してみたところ、

.foamが一番上になりsliderの位置になりsliderの下に潜り込んでしまいました(sliderの要素にposition:static;を入れても変化はありませんでした)。

.a_contentsは無事希望していた.foamのすぐ下の位置になり.foamと被ることはありませんでした。

.b_contentsは.a_contentsと同じ高さの位置になり.a_contentsに被ってしまいました。

.c_contentsも同じく.a_contentsの位置になりすべてのコンテンツの高さが重なった状態となりました。

[【スライダー】] ← [ .foam ]が重なった状態です。
「「「 _contents 」」」 ← 「.a_contents」「.b_contents」「.c_contents」すべてが重なった状態

このような状態です。

[tomtomtomtom]

うーん
今ひとつ状態がはっきりわからないですが、

.a_contents,.b_contents,.c_contents{
position:static;
}
sliderの要素にposition:static;を入れる。

↑これをお試し下さい。
また、再度、「.a_contents」「.b_contents」「.c_contents」がすべて重なるようでしたら、
検証ツールなどで、それぞれにposition:;_staticが効いているか、ご確認頂くことは可能でしょうか？？

[tomtomtomtom]

いや
ごめんなさい。

.foam,.a_contents,.b_contents,.c_contents{
position:static;
}
sliderの要素にposition:static;を入れる。

↑これで良いはずです。
問題は、恐らくposition:static;が効いてないのでは？？ということです。
検証ツールなどで、ご確認頂くことは可能でしょうか？？

[ojreee]

昨日確認したブラウザがFirefoxだったためchromeで確認してみました。
Firefoxで見た時は昨日回答したとおりになっていたのですが、chromeですと各contents達が縦に並んでいました。ありがとうございます。

しかしsliderの要素にだけどうしてもposition:static;が効いていないのか、sliderの後ろに.foamがまわりこんでしまいました。
もう少し調べて色々触ってみます。本当に助かります。

[tomtomtomtom]

検証ツールなどはご使用でしょうか？
chromeでしたら、該当の画面で右クリック→検証や、
右上の点々からその他のツール→デベロッパーツールでご使用いただけます。
firefoxも同じようなツールがあります。
どの要素にどのCSSが使われているのかわかりますので、ご使用を推奨致します^^

[tomtomtomtom]

urlをおしえていただきましたら、こちらも確認してみますが、如何でしょうか？

[ojreee]

検証ツールかはわからないのですがCtrl+shift+Cで出てくる画面で確認しておりました。
色々ありがとうございます；；

実際のサイトでもよろしいでしょうか。( https://www.すみません消させて頂きました/ )
要素が被さった状態のため応急処置としてとりあえずはtopを150pxずつ下にズラしているため綺麗な状態です。
それとすみません、今確認したところ私が図で説明した画像自体が間違っているようでした。
a,b,cはpc版でも縦にならんでおります。レスポンシブのためスマホ版で見て頂けますと幸いです。

クラス名ですが
.foam → .info
.a_contents → .campaign
.b_contents → .toiawase-1
.c_contents → .setsumei1
にあたります。

元の状態はそれらのstyleのtopを150pxずつ引いた場所になります。
sliderは#photoです。よろしくお願いいたします。

[tomtomtomtom]

>スマホ版ではtopで位置を決めるのでしょうか。
そんなことありません。好きなように決めます。

>Ctrl+shift+C
それです^^
Ctrl+shift+Cはしりませんでした。ありがとうございます^^

実際のサイトを拝見しました。

■ .a_contents（bもcも）でstaticが上手く行かない原因
・<header>と#mainに高さがない。
・.campaignのmargin-bottom: -170px;

※「消す」と書かれている部分は、まずはコメントアウトで試してみて下さい。

【<header>に高さがない】
・<header>の高さが無い原因
.nav-koteiにposition:fixed;が使われているから。
@media screen and (max-width: 600px)
.nav-kotei {
position: fixed;←消す
width: 100%;
height: 80px;←消す
z-index: 9999;←消す
background-color: white;
}
これでheaderに高さが出ます。
80pxを消したのは、.nav-koteiの高さを子要素に合わせるためです。

【#mainに高さがない】
ここは長くなるので、次のコメントに書きます。

【.campaignのmargin-bottom: -170px;】
@media screen and (max-width: 600px)
.campaign {
position: relative;←消す ※position:static;にせず、消してもいいです。
top: 550px;←消す
margin-bottom: -170px;←消す
display: flex;
flex-wrap: wrap;

【position:static;】
position staticはpositionをデフォルトに戻しているだけですので、
以下でも構いません。

@media screen and (max-width: 600px)
.toiawase-1 {
clear: both;
background-color: white;
width: 70%;
height: 180px;
padding: 20px;
position: absolute;←消す
position: relative;←消す
top: 750px;←消す
bottom: 0px;←消す
line-height: 220%;
z-index: 1000;←消す
margin: 0 auto;
}

@media screen and (max-width: 600px)
.setsumei1 {
width: 100%;
text-align: center;
text-align: center;←消す※なぜか２つあるから
background-color: white;
position: relative;←消す
top: 780px;←消す
z-index: 500;←消す
}

[tomtomtomtom]

すいません。
だいぶ長くなってしまいました。
次
【#mainに高さがない】
これの解決方法です。

[tomtomtomtom]

まず、#mainに高さがない原因ですが、
・#photoに高さが無い
・.infoにposition absolute

【#photoに高さがない】
この原因は#photo imgにposition absoluteが使用されているから。

@media screen and (max-width: 600px)
#photo {
width: 100%;
position: relative;←消す
height: 180px;←加える
overflow: hidden;←加える
}

@media screen and (max-width: 600px)
#photo img {
top: -8px;←消す
left: 0;←消す
position: absolute;←消す
margin-top: 100px;←消す
height: 180px;
}

【.infoにabsolute】
@media screen and (max-width: 600px)
.info {
width: 100%;
position: absolute;←消す
top: 290px;←消す
z-index: 3000;←消す
margin-top: 20px;←加える ※20pxは適当です。お好みで変えて下さい。
}

[tomtomtomtom]

あとは
・#main #main-box 位置調整 top:10px;くらい？
・.campaign .toiawase-1 .setsumei1 の上下のマージンなどで調整をお願いします。

こんな感じで如何でしょうか？？

[tomtomtomtom]

あと気になったのは
.all-wrap2と.all-wrapの高さ
.footerのpositionは消したほうが良いかもです。
もちろん、まずはコメントアウトでお試し下さい。

[ojreee]

遅くなってしまい申し訳ございません。
教えて頂いたこと全て今から一度試してみます！
長い間お時間頂いてすみませんでした、本当に助かります。

[ojreee]

今試してみたのですがtopを消して縦に並べることができました。フッターの調整も必要ですがアドバイス頂いた通りなんとかできそうです！あとはmarginなどで調整します。
本当に助かりました、ありがとうございます！

[tomtomtomtom]

無事解決できたようで何よりです^^
また機会がありましたら宜しくお願い致します。

[ojreee]

こちらこそ、本当にありがとうございました。
初心者のため度々質問させていただくかと思いますが、また機会がございましたらよろしくお願いいたします。