ボタンと文字が重なっています。重ならない方法のHTMLを教えてください。

ボタンと文字が重なっています。重ならない方法のHTMLを教えてください。

http://top.ribonsearch.xyz/

上側に　「文字」　中央に　「ボタン」　　　下側に　「文字」　の配置です。

このURLです

お願いします

No.2 回答者： fujillin 回答日時： 2019/08/26 10:49

こんにちは

まず先に、なぜご質問のようになっているかを理解なさっていますか？
文章の上にボタン群を position:absolute で、わざわざ重ねているからです。
「わざわざ」と書いたのは、指定しなければそのようなことにはならないから。
ですので、結果だけから見れば、意図的にこのようにしている（したい？）としか思えません。


さて、
＞上側に　「文字」　中央に　「ボタン」下側に　「文字」　の配置です。
上側、下側の「文字」の切れ目がどこなのかわかりませんが、現在の重ねる方法で文書構成を行いたいのなら、重ねたときにその下となる文字（文章）部分には、それだけの余白（空き）を作っておく必要があります。

それよりも、もっと素直に、
　<p>文章1(上側)</p>
　<div class="wrapper">
　　<!-- 　ボタン群の表示　 -->
</div>
　<p>文章2(下側)</p>
という文書構成にして、position:abusolute の指定をやめれば、そのままで表示されます。


・・というか、サンプルに記載の内容のようなことを実現しようというのであれば、ご質問の内容よりも遥かに難易度が高いと思いますけれど・・・？？
また、ご質問とは関係はありませんが、tableの中にセルがひとつだけのtableが多数あったり、サブメニューを表示する前にリンク処理が行われてしまうとか、全体的に意図不明な部分が多いですけれど、大丈夫なのでしょうか？？

No.1 回答者： nooloor 回答日時： 2019/08/25 13:28

簡単に、

<div style="position:absolute; top:380px; left:180px;">
文字や画像
</div>