0

Web ページのピクセルに問題があります。本体とボタンにカバー画像があります。ページのサイズが変更されると、ボタンも移動します。画面が変わってもボタンを置いたままにしたい。モバイルデバイスにもウェブサイトを移植しようとしているので、その問題が発生しています。PS私はウェブプログラミングが初めてです。

<html>
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
        <title>test page.</title>
        <style>
            body {
                background:url("test.jpg");
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
            }
            #mybutton {
                position: absolute;
                right:800px;
                top:300px;
            }
        </style>
    </head>
    <body>
        <button id="mybutton" onClick="javascript:alert('clicked!');">Click Me!</button>
    </body>
</html>
4

5 に答える 5

0

leftの代わりに使うべきだと思いますright。

絶対要素は、相対位置を持つ最初の親に対して配置されます。

したがって、位置が絶対的なボタンを持つことができます。その上に、位置が相対的になる div があります。次に、そのdivに対して相対的/相対的にボタンに位置を与えることができます。

画面サイズに関係なく、これは修正されます。

フィドル

于 2013-05-24T11:30:17.023 に答える
0

わかりましたので、ここで混乱していると思います。そうposition: absolute;言います：

この要素をブラウザ ウィンドウの右上隅に相対的に配置します

ブラウザ ウィンドウのサイズが変更されると、位置が変わります。実際に取るべきアプローチは、「キャンバス」のサイズを制限することです。つまり、これは背景画像の大きさなので、「キャンバス」をこのサイズのままにします。

http://jsfiddle.net/bLUhL/1/

このフィドルで画面のサイズを変更すると、ボタンが「キャンバス」に対して同じ位置にとどまり、これが常に中央にあることがわかります。

次に、マージンを使用してボタンを配置できます。

input
{
 margin-left:200px;
    margin-right:300px;
}
于 2013-05-24T11:05:26.800 に答える
0

必要に応じてこれを微調整してみてください:

#mybutton {
    position: fixed;
    right: 150px;
    top: 49%;
    display: block;
}

または、言い換えると、 position:fixed を使用します

于 2013-05-24T11:06:02.993 に答える
0

mybutton の css プロパティの位置を固定にします。

         #mybutton {
            position: fixed;
            right:800px;
            top:300px;
        }
于 2013-05-24T11:03:17.777 に答える