12

我的代码是这样的。

<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在外部div而不是页面本身。

如果我将其设置为right:0px;，则它与0px浏览器的右侧对齐，而不是外部div的右侧。

注意：我的外层div不是固定宽度；它根据屏幕分辨率进行调整。这是一个响应式网站设计。

4

7 回答 7

12

您可以使用容器 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;
}
于 2013-03-01T10:29:34.397 回答
10

你为什么不使用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
}

演示

如果必须使用，position:fixed那么您可以分配该margin-left值，因为您对两个 div 都使用了 fixed with。

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

演示 2

于 2013-03-01T09:51:24.600 回答
6

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

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

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

于 2013-03-01T09:53:06.080 回答
2

我想这就是你想要的

<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;
}
于 2014-11-19T10:41:51.853 回答
1

如果您想将.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/

于 2013-03-01T10:20:16.317 回答
0

有点hacky，但它有效

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}
于 2020-08-02T07:37:31.450 回答
0

以下对我有用。


<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>
于 2019-10-01T08:07:35.650 回答