css - [トップに戻る] ボタン - 解像度に基づいて固定位置を変更します

Question

私のサイトでは、トップに戻るボタンがページに続きます。これはまさに私が望んでいるものです。ただし、解像度が 1024x768 を超える場合 (すべての人に当てはまると確信しています)、ボタンの位置はメイン コンテンツ div 内にはありません。

Javascript を使用して解像度を検出し、そこから位置を調整することもできますが、よりクリーンなソリューションがあれば、それを好むでしょう! また、私はデザイナーではないので、誰か化粧品の情報をお持ちでしたら、よろしくお願いします!

Answer 1

解決策があります。ボタンをラップするdivを追加します。

<div id="button-wraper">
    <div id="backToTop">
            <a href="#top">
                <img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top">
            </a>
    </div>
</div>

CSS

#button-wraper {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

そしてから削除position: fixed;し#backToTopます。

また、このコードは必ず真上に配置して<div class="footer">ください。

Answer 2

置く

<div id="backToTop">
            <a href="#top">
                <img alt="Back to top" style="border: none;z-index: 100;" src="site_resources/upArrow.png">
            </a>
        </div>

コンテンツ div 内。「左」の配置を削除し、下の配置を維持します。何も定義されていないため、自然な左の位置に配置されます。

とはいえ、実際は今の方がずっと良く見えると思います。

Answer 3

編集**

これを試して：

<div id="button-wrap">
    <div id="backToTop">
        <a href="#top">
            <img src="site_resources/upArrow.png" style="border: none;z-index: 100;" alt="Back to top" />
        </a>
    </div>
</div>

CSS

#button-wrap {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width:100%;
}

#backToTop {
  position:relative;
  width:1000px;
  margin:0 auto;
  z-index: 1000;
  color: #C6C6C6;
  opacity: 0.3;
}