CSS: Создание DIV появляется в правом верхнем углу экрана

Question

Из примеров, которые я видел это может быть достигнуто с помощью

right: 0px; 
top: 0px; 

Или некоторые вариации этого. Однако, когда я это делаю, мой div остается плотно влево от экрана. Мне нужно начать посещать область -1000px, чтобы она отображалась в правом верхнем углу, что кажется неправильным.

Вот мой HTML, и это div с классом «mysettings-menu», который я пытаюсь разместить в правом верхнем углу экрана.

  <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 вне этих див не делает разницы, как она остается как можно ближе к левой стороне экрана, как он может получить ,

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

Answer 1

Выражаясь в правом верхнем углу ,:

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

т.е.. Измените position на absolute.

Answer 2

Прежде всего,

position: relative 

означает, по отношению к текущему положению элемента. В сочетании с

right: 0 

это, безусловно, не влияет на позиционирование вашего div.

Что вы хотите

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

хотя и отличаются в некоторых отношениях и похожи на какой-то другой.

Answer 3

Если вы используете Bootstrap, тогда вы можете добавить класс pull-left. Это basicalley добавить СВОЙСТВА float: left !important к вашему DIV, чтобы сделать его поплавок влево (вы можете использовать его вправо тоже)

Answer 4

Что об этом:

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

CSS:

.nav { 
    float:left; 
} 

.mysettings-menu { 
    float:right;  
} 

Как упоминалось выше, вы также можете использовать абсолютное позиционирование, но это зависит от того, хотите ли вы изменить поток документа.

EDIT

Как один ответ указывает (Ерко Palma), если вы используете загрузчик вы можете добавить тянуть налево и выдвижная правильные классы для ваших элементов, это на самом деле является лучшим решением, чем писать новый CSS для существующих элементов.

Обновлено скрипку:

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

Answer 5

Большинство 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, который будет отображаться в самом верхнем правом углу окна, независимо от того, где вы прокручиваться - это всегда было видно.

Answer 6

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;