CSS：製作一個div出現在屏幕的右上方

，從我所看到的這個例子可以通過使用CSS：製作一個div出現在屏幕的右上方

right: 0px; 
top: 0px;

或一些這方面的變化來實現。但是，當我這樣做時，我的div保持在屏幕左側。我需要開始進入-1000px區域，使其出現在右上角，這看起來不正確。

這是我的HTML，它是與類「mysettings菜單」的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>

正如你可以看到我使用了一些默認的自舉類，但即使把我的DIV這些div之外不有所作爲，因爲它仍然是靠近屏幕的左側，因爲它可以得到。

.mysettings-menu      { position: relative; right: 0}

來源

2015-02-09 user3407039

如果它應該是導航欄裏面，嘗試浮動是正確的，而不是。 – 2015-02-09 12:21:48

把它放在右上角，：

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

即。將position更改爲absolute。

來源

2015-02-09 12:13:05

首先，

position: relative

裝置相對於元件的當前位置。結合

right: 0

它當然不會影響你的div的定位。

你想要的是

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

雖然雙方在某些方面不同，在其他一些類似的。

來源

2015-02-09 12:13:16

啊謝謝。我對CSS的工作還很陌生，並且在絕對的印象之下，如果你向下滾動頁面，就會在屏幕上顯示一些東西，而這並不是我想要的。但現在這個工作。 – user3407039 2015-02-09 12:18:01

職位：固定可以用於那些粘性的東西。從某處閱讀和理解css定位規則。定位是每個gui中最重要的部分之一。 – 2015-02-09 12:20:19

如果您使用的是Bootstrap，那麼您可以添加類pull-left。這basicalley的propertie float: left !important添加到您的DIV使它左浮動（你可以用它來正確太）

來源

2015-02-09 12:14:13

這個怎麼樣：

http://jsfiddle.net/lharby/zs15e48q/

CSS：

.nav { 
    float:left; 
} 

.mysettings-menu { 
    float:right;  
}

正如其他人所提到的，您也可以使用絕對定位，但這取決於您是否要更改文檔流。

編輯

作爲一個答案指出（Yerko繪製帕爾馬），如果您使用的是引導你可以添加上拉左，右拉班的元素，這其實是比寫新的CSS更好的解決方案爲現有的元素。

更新撥弄：

http://jsfiddle.net/lharby/zs15e48q/1/

來源

2015-02-09 12:14:34 lharby

大多數position屬性是相對於父容器中。

如果你想在div是位置，你需要指定位置絕對其父容器的右上角：

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

爲position屬性替代值是：

static (default) 
relative 
fixed

fixed是唯一不相對於其父容器定位的position屬性，但是相對於窗口的位置。

例如：

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

將設置div來顯示在不論你在何處滾動到窗口的最右上角 - 這將永遠是可見的。

來源

2015-02-09 12:14:36

jsfiddle demo

HTML

<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>

CSS

.navbar-collapse{ 

    border:1px solid red 

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

來源

2015-02-09 12:19:17

CSS：製作一個div出現在屏幕的右上方

回答

相關問題