Html 如何在div内右对齐固定位置div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15154790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to right align fixed position div inside a div
提问by Ravish Kumar
My code is like this.
我的代码是这样的。
<div class="outer">
<div class="inner">some text here
</div>
</div>
CSS:
CSS：
.outer {
max-width:1024px;
background-color:red;
margin:0 auto;
}
.inner {
width:50px;
border:1px solid white;
position:fixed;
}
The inner div, which is positioned leftby default, needs to be positioned against the rightw.r.t. the outer divand not to the page itself.
内div，其被定位left在默认情况下，需要被定位成抵靠rightWRT外div，而不是页面本身。
If I style it to be right:0px;, then it aligns 0pxfrom the browser's right, not the outer div's right.
如果我将它的样式设置为right:0px;，那么它会0px从浏览器的右侧对齐，而不是从外部的右侧对齐div。
NOTE : My outer divis not fixed width; it adjust as per screen resolution. It's a responsive website design.
注意：我的外层div宽度不是固定的；它根据屏幕分辨率进行调整。这是一个响应式网站设计。
采纳答案by Twon-ha
You could use a container div:
您可以使用容器 div：
<div class="outer">
<div class="floatcontainer">
<div class="inner">some text here</div>
</div>
</div>
Then use that to handle the float, and make its child position: fixed
然后用它来处理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;
}
回答by Sowmya
Why don't you use position:absolute
你为什么不使用 position:absolute
position:fixedalways relative to the browser
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
}
If it is compulsory to use position:fixedthen you can assign the margin-leftvalue, since you are using fixed with for both the divs.
如果必须使用，position:fixed那么您可以分配该margin-left值，因为您对两个 div 都使用了 fixed 。
.inner {
width:50px;
border:1px solid white;
position:fixed; margin-left:150px
}
回答by Billy Moat
Two options. Simply float the inner div right or else use absolute positioning to achieve it.
两种选择。只需将内部 div 向右浮动，或者使用绝对定位来实现它。
For floating simply set float:right on the inner DIV and overflow:hidden on the outer DIV.
对于浮动，只需在内部 DIV 上设置 float:right 并在外部 DIV 上设置 overflow:hidden。
For absolute positioning simply set position:relative on the outer DIV and set position: absolute and right:0 top:0 on the inner DIV.
对于绝对定位，只需在外部 DIV 上设置 position:relative 并在内部 DIV 上设置 position: absolute 和 right:0 top:0。
回答by AAZ
I think this is what you want
我想这就是你想要的
<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;
}
回答by Taufik Nurrohman
If in case, you want to make the .innerelement as a fixed positioned element and leave the other things inside .outerto be "scrollable", I suggest you to set the .innerposition as an absolute positioned element. Then, create a new wrapper after it with overflow:auto:
如果您想将.inner元素设置为固定定位元素，而将其他内容保留.outer为“可滚动”，我建议您将.inner位置设置为绝对定位元素。然后，在它之后创建一个新的包装器overflow:auto：
<div class="outer">
<div class="inner">Some text here...</div>
<div class="flow">content</div> <!-- extra markup -->
</div>
Here's a demo: http://jsfiddle.net/tovic/ZLbqn/3/
这是一个演示：http: //jsfiddle.net/tovic/ZLbqn/3/
回答by abasar
Following works for me.
以下对我有用。
<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>
