如何在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;
}

默认情况下左侧定位的内部div需要位于外部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都使用fixed.

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

演示2

Answer 3

两种选择。只需将内部 div 向右浮动，或者使用绝对定位来实现它。

对于浮动，只需在内部 DIV 上设置 float:right 并在外部 DIV 上设置 overflow:hidden。

对于绝对定位，只需在外部 DIV 上设置 position:relative 并在内部 DIV 上设置 position: absolute 和 right:0 top:0。