Question

我在网页上遇到像素问题。我在身上盖上了图像，上面有按钮。当页面调整大小时，按钮也在移动。我希望按住那里的按钮，即使屏幕发生变化也是如此。我也试图在移动设备上移植网站，这就是我遇到这个问题的原因。 P.S我是网络编程的新手。

<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>

Answer 1

使css属性位置固定为mybutton。

         #mybutton {
            position: fixed;
            right:800px;
            top:300px;
        }

Answer 2

好的，所以我相信你会让自己感到困惑。所以position: absolute;说：

将此元素放置在相对于右上角的位置浏览器窗口

因此，如果浏览器窗口调整大小，那么您的位置会发生变化。我认为你应该采取的方法是约束你的“画布”的大小。即这是背景图像有多大，所以我要保持这种尺寸的“画布”，即

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

如果您在这个小提琴中调整屏幕大小，您会看到按钮保持在相对于“画布”的相同位置，并且始终位于中心。

然后，您可以使用边距定位按钮：

input
{
 margin-left:200px;
    margin-right:300px;
}

Answer 3

尝试根据您的需要调整它：

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

或换句话说，使用position：fixed

Answer 4

试试这个家伙...定位是最好的方法。如果你使用绝对按钮，当你滚动页面时会上升..和

右：0;顶部：0;

将帮助您的按钮保持最右侧..

 #mybutton {
            position: fixed;
            right:0;
            top:0;
            width:100px;//what u want
            height:30px;//what u want
        }

如果您想要从顶部和右侧获得一些余量，请使用此

右：100px; //你想要什么

top：100px; //你想要什么

Answer 5

我认为您应该使用left代替right。

绝对元素将针对位置相对的第一个父元素。

所以你可以有一个位置绝对的按钮。最重要的是，会有一个div，其位置是相对的。然后你可以给你的按钮定位，相对于该div。

尽管有屏幕大小，但仍将修复。

Fiddle

HTML屏幕分辨率

5 个答案: