0

我正在尝试放置一个按钮。我将它的位置设置为绝对，所以我不知道如何正确放置它。

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

在此处查看示例：（已删除）

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

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

感谢帮助。

4

4 回答 4

1

如果您Button将始终在同一个地方，那么您可以这样做：

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

只需编辑您的right或top您想要的任何内容。小例子

于 2012-06-17T23:18:27.553 回答
0

如果position: absolute在按钮上使用，则可以使用、top和属性指定其位置。例如，要将具有 id 的元素定位到页面的右上角，顶部和右侧的间距均为 5px，您可以使用以下 CSS 代码：rightbottomleftbutton

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

如果你只是想让元素走到父元素的右边，你应该使用float: right. 然后你可以使用margin-top, margin-right, margin-bottomandmargin-left来确保元素周围有一些边距。

请参阅我的示例小提琴以了解不同之处。请注意，两个“按钮”都在 HTML 代码中的同一个 div 内，但绝对定位的按钮似乎在该块之外。

有关 CSS 定位的更多信息，请查看这篇文章。

于 2012-06-17T23:18:41.260 回答
0

当一个元素有时，您必须使用、和 来position: absolute定位它。您在此属性上使用的值应该相对于最近的定位祖先（“定位”元素是一个具有除空白或之外的值的元素）。leftrighttopbottompositionstatic

例如，考虑以下 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 像素，距离容器的左边框 100 像素。

请参阅工作示例。

于 2012-06-17T23:20:12.087 回答
0

我可以让它工作的最快方法是从您的规则中删除top, left,float和margin-left声明，并将其更改为..emailpositionrelative

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

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

于 2012-06-17T23:29:16.297 回答