CSS：使div显示在屏幕的右上角

从我看到的例子中，这可以通过使用

right: 0px;
top: 0px;

或者是这个的一些变体。然而，当我这样做时，我的div紧靠屏幕左侧。我需要开始进入-1000px区域，使其显示在右上角，这似乎不正确

这是我的HTML，它是带有类“mysettings menu”的div，我正试图将它放在屏幕的右上角

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink(...)</li>
                    <li>@Html.ActionLink(...)</li>
                    <li>@Html.ActionLink(...)</li>
                </ul>
                <div class="mysettings-menu">
                    <ul>
                        <li>
                            <a href="#">Settings</a>
                            <ul class="sub_menu">
                                <li><a href="#">Log In</a></li>
                                <li><a href="#">Add New Application</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

---

要将其放在右上方，请执行以下操作：

.mysettings-menu{
 position: absolute; 
 right: 0px;
 top:0px;
}

即，首先将

位置更改为
绝对位置

position: relative 

是指相对于元素的当前位置。结合

right: 0

这当然不会影响你的div的定位

你想要的是

.settings-menu { position: absolute; right: 0; top: 0; } or .settings-menu { float: right; }

尽管两者在某些方面不同，在某些方面相似。
如果您使用的是引导，那么您可以添加类
左拉
。基本上你可以添加属性
float:left！重要信息
到您的div，使其向左浮动（您也可以将其向右浮动）
这样如何：


CSS:

正如其他人所提到的，您也可以使用绝对定位，但这取决于您是否要更改文档流

编辑

正如一个答案所指出的（Yerko Palma），如果您使用引导，您可以向元素添加左拉和右拉类，这实际上是一个比为现有元素编写新css更好的解决方案

更新小提琴：

大多数
位置
属性都与父容器相关

若您希望
div
位于其父容器的右上角，则需要将该位置指定为绝对位置：

.mysettings-menu { position: absolute; top:0; right: 0; }

位置
属性的备选值为：

static (default)
relative
fixed

fixed
是唯一的
position
属性，它不相对于其父容器定位，而是相对于窗口定位

例如：

.mysettings-menu { position: fixed; top:0; right: 0; }

将div设置为显示在窗口的右上角，无论滚动到何处-它始终可见。

html

啊，谢谢。我对CSS的使用还比较陌生，我的印象是，如果你向下滚动页面的话，绝对会让一些东西粘在屏幕上，这是我不想要的。但这现在起作用了。位置：fixed可用于粘性物质。从某处阅读并理解css定位规则。定位是每个gui中最重要的部分之一。如果它应该在导航栏中，请尝试将其向右浮动。
static (default)
relative
fixed

.mysettings-menu { position: fixed; top:0; right: 0; }

   <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav" style="display:inline-block">
                <li>@Html.ActionLink(...)</li>
                <li>@Html.ActionLink(...)</li>
                <li>@Html.ActionLink(...)</li>
            </ul>

        <div class="mysettings-menu">
            <ul>
                <li>
                    <a href="#">Settings</a>
                    <ul class="sub_menu">
                        <li><a href="#">Log In</a></li>
                        <li><a href="#">Add New Application</a></li>
                    </ul>
                </li>
            </ul>
        </div>
     </div>

.navbar-collapse{

    border:1px solid red

}
.mysettings-menu{
    border:1px solid blue;
    display:inline-block;
    position:absolute;
    right: 10px;