Question

我正在尝试按下按钮。我的位置设置为绝对，所以我无法弄清楚如何正确放置它。

它的按钮上写着“这是你的产品吗？”

请参阅此处的示例:(已删除）

我希望它被放置在右侧边栏的小部件顶部，周围有5px的间距。我该怎么做？

我最初从这里取了按钮：http://cssdeck.com/t/uHhhprW6

感谢帮助。

Answer 1

如果您的Button总是在同一个地方，那么您可以通过以下方式执行此操作：

.but {
    position: absolute;
    width: 80px;
    height: 25px;
    background-color: #DEDEDE;
    right: 0;
    margin: 5px;
}

只需编辑您的right或top即可。 little example

Answer 2

如果您在按钮上使用position: absolute，则可以使用top，right，bottom和left属性指定其位置。例如，要将ID为button的元素放置在页面的右上角，在顶部和右侧都有5px的间距，您可以使用此CSS代码：

#button {
    position: absolute;
    top: 5px;
    bottom: 5px;
}

如果您只想让元素转到父元素的右侧，则应使用float: right。然后，您可以使用margin-top，margin-right，margin-bottom和margin-left来确保元素围绕它获得一些边距。

请参阅我的example Fiddle了解差异。请注意，两个“按钮”都在HTML代码的同一个div中，但绝对定位的按钮似乎位于该块之外。

有关CSS定位的更多信息，请查看this article。

Answer 3

当元素具有position: absolute时，您必须使用left，right，top和bottom来定位它。您在此属性上使用的值应该相对于最接近的定位祖先（“定位”元素是具有position值而不是空白或static的元素。

例如，考虑以下HTML：

<div id="container">
    <div id="position_me"></div>
</div>

以下CSS：

#container { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    border: 1px solid green;
}
#position_me { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    left: 100px; 
    top: 100px;
    border: 1px solid red;
}

红色框与容器的顶部边框相距100 px，距容器的左边框100px。

请参阅working example。

Answer 4

我能让它工作的最快方式是从top规则中删除left，float，margin-left和.email声明，以及将其position更改为relative。

.email {
position: relative; /* not absolute */
width: 220px;
height: 30px;
font: .75em "lucida grande", arial, sans-serif;
margin: 0 0 5px 0;
}

我认为有更清晰/更简单的方法来制作这个特定的按钮 - 包含元素及其子元素似乎有很多绝对的定位。但我所建议的变化似乎可以作为一种快速解决方法。

如何正确放置此按钮？

4 个答案: