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

Мой код такой.

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

Внутренний div, который по умолчанию позиционирован как left, должен располагаться напротив right w.r.t. внешний div, а не сама страница.

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

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

Ответы

Ответ 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;
}

Ответ 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, так как вы используете fixed для обоих div.

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

DEMO 2

Ответ 3

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

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

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

Ответ 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/

Ответ 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;
}

Ответ 6

Следующие работы для меня.


<div style="position: relative;">
    <div id="overlay">
        overlay content
    </div>
</div>

<style>
#overlay {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 3;
}
</style>