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使用固定的。

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

<强> DEMO 2

Answer 3

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

对于浮动，只需在内部DIV上设置float：right并在上部DIV上隐藏：

对于绝对定位，只需设置位置：外部DIV上的相对位置和设置位置：绝对值和右侧：0顶部：内部DIV上的0。

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

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

Answer 7

有点hacky，但是可以用

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}

如何在div内对齐固定位置div

7 个答案: