Web ページ レイアウト 右フローティング bar_html/css_WEB-ITnose

http://www.gzsi.gov.cn/
このウェブページのレイアウトを確認するのにご協力ください
右側の QR コードは本文の右側に貼り付けることができ、上にスクロールしたり、スクロールしたりすることはできませんページを下にスクロールします。ページが縮小されると、一般的なフローティング ウィンドウ レイアウトのようにウィンドウの固定位置に表示され、メイン コンテンツをブロックすることはありません。しかし、全体の内容としてはまだ真ん中の右側にあります。 Web ページを中央に配置し、右側に右側のブロックを接続する方法

ディスカッションへの返信 (解決策)

絶対配置

配置.... .......

絶対配置

これは、この Web サイト内の効果です

配置....

通常のフローティング広告とは異なり、どのように配置するかを尋ねています

ページの合計幅が 1190px であると仮定します
その場合、.right-nav の位置は全画面幅の半分から開始して 50% になります, margin -left の値は 1190/2 = 595px;
したがって、ブラウザが最大化されているかどうかに関係なく、右の div をメイン領域の右側に接続できます

<style type="text/css">.main{width:1190px;margin:0 auto;}.box{background:#ccc;height:400px;}.right-nav{display:block;position:fixed;top:0;left:50%;margin-left:595px;background:#fcc;width:100px;height:300px;}</style><div class="main box"></div><div class="right-nav"></div>

次のコードを見てください。
.floatLeft{position:fixed; left: 50%;top: 50%;margin: -50px 0 0 -650px;font-size: 12px;display: none;}

これは左側にフローティングです。 。 。 。 。上記と同様に、目的の効果を実現するために、位置を固定し、左のパーセンテージとマージンを加えます。

絶対位置

これはブラウザウィンドウの位置に基づいています
固定を使用したくない場合は、広告の隣に div を配置できます。 、これは広告の左側の部分です 相対属性を設定してから、絶対属性を広告に直接追加します

絶対位置

これは、ブラウザウィンドウの位置に基づいています。このサイト内
ページをスクロールしたい場合 QRコードは動かないので直接固定してください