Question

我正在尝试在浏览器的右上角放置一个CSS按钮 - 我怎样才能将它置于最右边？！我试过填充，顶部等等

CSS看起来像：

 #logoutbutton {
                        text-align: right;
                        position: relative;
                    }

http://jsfiddle.net/tu5gv8j0/ - 注销按钮与其他按钮相关的内容

其他按钮的CSS：

.wrap {
            position: relative;
            }

            img {
                position: absolute;
            }

            h1 {
                color:red;
                font-family:Trebuchet MS;
                font-size:250%;
                text-align:center;
            }   

            .btn {
                background: #3498db;
                background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
                background-image: -moz-linear-gradient(top, #3498db, #2980b9);
                background-image: -ms-linear-gradient(top, #3498db, #2980b9);
                background-image: -o-linear-gradient(top, #3498db, #2980b9);
                background-image: linear-gradient(to bottom, #3498db, #2980b9);
                font-family: Arial;
                color: #ffffff;
                font-size: 25px;
                padding: 20px 40px 20px 40px;
                text-decoration: none;
            }

            .btn:hover {
                background: #3cb0fd;
                background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
                background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
                background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
                text-decoration: none;
            }

            #mainbuttons {
                text-align: center;
                position: relative;
                top: 200px;
            }



            .btn:first-child, .btn:nth-child(2)  {
                margin-right: 30px;
            }

Answer 1

JS Fiddle - absolute

#logoutbutton {
                right: 0;               
                top: 0;
                position: absolute;

}

或

JS Fiddle - fixed

#logoutbutton {
                right: 0;               
                top: 0;
                position: fixed;

}

“位置”属性的文档：CSS Position Property

Answer 2

怎么样：

#logoutbutton {
    position: absolute;
    right:0;
    top:0;
}

这是你想要实现的吗？

＆＃13;

.wrap {
    position: relative;
}
img {
    position: absolute;
}
h1 {
    color:red;
    font-family:Trebuchet MS;
    font-size:250%;
    text-align:center;
}
.btn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    font-family: Arial;
    color: #ffffff;
    font-size: 25px;
    padding: 20px 40px 20px 40px;
    text-decoration: none;
}
.btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
#mainbuttons {
    text-align: center;
    position: relative;
    top: 200px;
}
#logoutbutton {
    position: absolute;
    right:0;
    top:0;
}
.btn:first-child, .btn:nth-child(2) {
    margin-right: 30px;
}

＆＃13;

<title>Sports day</title>
<body>
    <div class="wrap">
        <img src="/images/logo.png" alt="Highdown logo" />
         <h1>Sports day</h1> 
    </div>
    <div id="mainbuttons">
        <button class="btn" onclick="location.href='http://localhost/sportsday/entryformsuccess.php'">Entry forms</button>
        <button class="btn">Scoresheets</button>
        <button class="btn">Results</button>
    </div>
    <div id="logoutbutton">
        <button class="btn">Logout</button>
        <div>

＆＃13;

Answer 3

#logoutbutton {position:absolute; top:0; right:0;}

使用绝对定位将按钮拉出正常流量之外，并将其相对于最近的包含块定位，在本例中为浏览器窗口。

http://jsfiddle.net/roachdesign/dyvduehr/

Answer 4

#logoutbutton {

                    position: absolute;
                    top:0px; 
                    right:0px;
                }

Answer 5

经过测试和构建。应用位置固定，使其永远不会从右上角位置移动。意思是，它将在该位置的页面上不断浮动。然后你只需要指定位置/边距。在这种情况下，您希望它从顶部开始为0px，从右侧开始为0px。如果你想要填充/边距等，请相应调整。

<style>
#button{
    position:fixed;
    top:0;
    right:0;
}
</style>


<div id="button">button</div>

放置一个css按钮

5 个答案: