如何将元素固定在右侧？

Question

我该如何将元素定位到窗口的右侧对齐？

- john2x

Answer 1

如果您想将元素从流中移除，

position: absolute;
right: 0;
top: /* whatever */;

但是如果没有更多的细节或背景信息，很难用“正确”的答案来回答你的问题。

- Matt Ball

Answer 2

您可以像这样向右浮动它们：

float: right;

这取决于周围的元素，但这肯定是最简单的方法。

请注意，这对于绝对定位的项目显然不起作用。有关更多详细信息，请参见此链接：http://www.w3schools.com/css/pr_class_float.asp

- dscher

Answer 3

您好，有更好的方法使用float:right将您的元素放在右侧，如果您想要固定它并且不希望随着滚动而移动，您可以使用这个方法。

.element{  
 position:fixed;
 z-index:1000;
 height:30px;
 width:60px;
 right:0;
}

同时查看这个链接：view this

- Kali Charan Rajput

Answer 4

如果您希望它固定在视口的右侧，即使您滚动页面，那么您需要使用固定定位，如下所示：

.pinned {  
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
}

显然，根据您的需要更改顶部/宽度/高度值。

- DisgruntledGoat

Answer 5

display: flex;
height: 10%;
width: 100%;
background-color: #111111;
color: #FFFFFF;
text-align: center;
font-size: .85rem; 

如果您将 #footer 放置在 html 底部并使用 Flex Box，它会自动附着在内容底部。您还需要使其他用于内容的 div 显示：flex;。这里是一个 Flexbox 的链接，它是一个非常好的工具。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

- Geeklyrood

Answer 6

使用浮动属性：

float: right;

- GSto

Answer 7

您也可以使用绝对定位的元素

div{  
 position:absolute;
 z-index:1000;
 width:20px;
 height:20px;
 top:0;
 right:0;
}

这将把 div 固定在页面的右上角。我使用 1000 作为 z-index，因为它允许您在不修改此样式的情况下将其他 z-index 放置在其下方。

- Christopher Altman