Как правильно выровнять фиксированное положение div внутри div

Question

Мой код выглядит следующим образом.

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div> 

CSS:

.outer { 
    max-width:1024px; 
    background-color:red; 
    margin:0 auto; 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; 
} 

Внутренний ДИВ, который расположен влево по умолчанию должны быть расположены прямо w.r.t внешнего DIV, а не к странице.

Если я упоминаю, что это правильно: 0px; он делает так, чтобы сделать 0px из браузеров, не нарушая права внешнего div.

ПРИМЕЧАНИЕ: мой внешний div не является фиксированной шириной. Он настраивается в соответствии с разрешением экрана. Это отзывчивый дизайн сайта.

Answer 1

Вы можете использовать контейнер DIV:

<div class="outer"> 
    <div class="floatcontainer"> 
     <div class="inner">some text here</div> 
    </div> 
</div> 

затем использовать для обработки float, и сделать своего ребенка position: fixed

.outer { 
    width:50%; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
    position: relative; 
} 
.floatcontainer { 
    float: right; 
} 
.inner { 
    border:1px solid white; 
    position:fixed; 
} 
.floatcontainer, .inner{ 
    width: 50px; 
} 

Answer 2

Почему бы вам не использовать position:absolute

position:fixed всегда относительно браузера

.outer { 
    width:200px; 
    height:600px; 
    background-color:red; 
    margin:0 auto; 
    position:relative 
} 
.inner { 
    width:50px; 
    border:1px solid white; 
    position:absolute; right:0 
} 

DEMO

---

Если обязательно использовать position:fixed, то вы можете присвоить значение margin-left , так как вы используете фиксированный для обоих div.

.inner { 
    width:50px; 
    border:1px solid white; 
    position:fixed; margin-left:150px 
} 

DEMO 2

Answer 3

два варианта. Просто плавайте внутренний div справа или используйте абсолютное позиционирование для его достижения.

Для плавающего простого набора float: прямо на внутреннем DIV и переполнении: скрыто на внешнем DIV.

Для абсолютного позиционирования просто установите положение: относительное на внешнем DIV и заданное положение: абсолютное и правое: 0 верх: 0 на внутренней DIV.

Answer 4

Если в случае, вы хотите сделать .inner элемент в виде фиксированного позиционируемый элемент и оставить другие вещи внутри .outer быть «прокручивать», я предлагаю вам установить .inner позицию абсолютного позиционированного элемента. Затем создайте новую обертку после него с overflow:auto:

<div class="outer"> 
    <div class="inner">Some text here...</div> 
    <div class="flow">content</div> <!-- extra markup --> 
</div> 

Вот демо: http://jsfiddle.net/tovic/ZLbqn/3/

Answer 5

Я думаю, что это то, что вы хотите

<div class="outer"> 
    <div class="inner">some text here 
    </div> 
</div> 


.outer { 
    margin: 0 auto; 
    width: 860px; 
    direction: rtl; 
    background-color: black; 
    height: 1200px; 
} 

.inner { 
    float: right; 
    position: fixed; 
    text-align: center; 
    width: 220px; 
    background-color: red; 
    height: 50px; 
}