Question

我的css按钮有很大的问题...我的屏幕尺寸是1366x768，他们的位置很好，直到我在浏览器中缩小或显示给有更大屏幕的人。

有人可以帮助我吗？

有问题的网站：http://riotpointscodes.info/region.html

Answer 1

您将按钮absolutley放置在文档正文中：

左键示例：

position: absolute;
top: 475px;
width: 251px;

将所有按钮放在位于纸张上方的容器中，并将位置设置为相对或绝对值，然后使用按钮的位置进行播放。

Answer 2

使用绝对定位时，需要一个锚点。定位点是HTML树中第一个定义了position:relative的元素。如果未找到任何元素，则BODY标记将成为锚点。

由于你有一个包含东西的包装器，这应该是你的锚点，以便即使浏览器调整大小而不是BODY也能保持所有内容。

Answer 3

今天在工作中感到无聊，你的图形非常酷......所以......

你是我的朋友：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Riot Points Codes</title>
        <link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" />
        <style type="text/css">
            body {
                background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14;
                margin: 0;
                padding: 0;
            }
            #wrapper {
                width: 895px;
                height: 493px;
                position:relative;
                top:180px;
                margin:0 auto;
                background: url('region_files/paper.jpg') no-repeat top center;
            }

            .choice {
                background: url("region_files/map.png") no-repeat scroll 0 0 transparent;
                height: 212px;
                left: 50%;
                margin-left: -259px;
                position: absolute;
                top: 43px;
                width: 517px;
            }

            .logo {
                left: 50%;
                margin-left: -205px;
                position: absolute;
                top: -135px;
            }
            #lol-custom-buttons {
                position:   absolute;
                bottom: 107px;
                left: 0px;
                width: 100%;
                height: 90px;
                text-align:center
            }
            .play-free-link {
                height: 90px;
                width: 251px;
                background-repeat: none;
                color: #ECC873;
                display: inline-block;
            }

            .play-free-link.one {
                background-image: url("http://riotpointscodes.info/images/1n.png");
            }

            .play-free-link.one:hover {
                background-image: url("http://riotpointscodes.info/images/1h.png");
            }

            .play-free-link.two {
                background-image: url("http://riotpointscodes.info/images/3n.png");
            }

            .play-free-link.two:hover {
                background-image: url("http://riotpointscodes.info/images/3h.png");
            }
            .play-free-link.three {
                background-image: url("http://riotpointscodes.info/images/2n.png");
            }

            .play-free-link.three:hover {
                background-image: url("http://riotpointscodes.info/images/2h.png");
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="logo"><img src="region_files/logo.png"></div>
            <div class="choice"></div>
            <div id="lol-custom-buttons">
                <a class="play-free-link one" href="http://riotpointscodes.info/"></a>
                <a class="play-free-link two " href="http://riotpointscodes.info/"></a>
                <a class="play-free-link three" href="http://riotpointscodes.info/"></a>
            </div>
        </div>
    </body>
</html>

CSS按钮定位在调整大小/缩放时不断变化

3 个答案: