如何右对齐div内的固定位置div答案

【问题标题】：How to right align fixed position div inside a div如何右对齐div内的固定位置div
【发布时间】：2013-03-01 09:49:27
【问题描述】：

我的代码是这样的。

<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 不是固定宽度；它根据屏幕分辨率进行调整。这是一个响应式网站设计。

【问题讨论】：

谢谢，我必须加上最大宽度和 % 宽度，但它是完美的解决方案。

标签： html css

【解决方案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 值，因为您对两个div 都使用fixed with。

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

DEMO 2

【讨论】：

您的第二个解决方案似乎有效，但我的外部 div 的问题不是固定宽度。它会根据屏幕宽度自行调整。所以我不能在里面声明宽度。我在我的查询中更新了同样的内容
@RavishKumar 使用 position:absolute 有什么问题
我想要的是它应该是从顶部和内部主体 div 固定的 20%。
正如我在第一次尝试中解释的那样，位置：固定总是相对于浏览器

【解决方案3】：

两个选项。只需将内部 div 向右浮动或使用绝对定位即可实现。

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

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

【讨论】：

这些都不适用于position: fixed，我不确定overflow: hidden 会有什么帮助。
它使它与页面而不是外部 div 对齐
@Twon-ha - 将 overflow:hidden 添加到包含浮动子元素的父容器允许父容器增加高度以包含浮动子元素。
@RavishKumar - 我只能假设您没有完全按照我的概述实施我的解决方案。

【解决方案4】：

我想这就是你想要的

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

【讨论】：

【解决方案5】：

如果你想将.inner元素设为固定定位元素，而将.outer中的其他内容保留为“可滚动”，我建议你设置@ 987654324@ 位置作为绝对定位元素。然后，使用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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

有点hacky，但它有效

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

【讨论】：