Html 如何以绝对位置在右侧放置一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9735513/
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 place a div on the right side with absolute position
提问by Arun P Johny
I've a page where a dynamic message box has to be displayed without disturbing the actual page. This message box has to appear at the top right corner of the page overlapping the existing contents.
我有一个页面，必须在不干扰实际页面的情况下显示动态消息框。此消息框必须出现在页面的右上角，与现有内容重叠。
I've tried to use position: absolutebut then I'm unable to place it in the right corner. Also I'm unable to use leftsince I've to support responsive design from Bootstrap.
我试过使用，position: absolute但后来我无法将它放在右角。另外我无法使用，left因为我必须支持 Bootstrap 的响应式设计。
Here is a sample markup
这是一个示例标记
<html>
<body>
<div class="container">
<!-- Need to place this div at the top right of the page-->
<div class="ajax-message">
<div class="row">
<div class="span9">
<div class="alert">
<a class="close icon icon-remove"></a>
<div class="message-content">
Some message goes here
</div>
</div>
</div>
</div>
</div>
<!-- Page contents starts here. These are dynamic-->
<div class="row">
<div class="span12 inner-col">
<h2>Documents</h2>
</div>
</div>
</div>
</body>
</html>
This message box should have a width of 50%with respect to the .containerand the left side of the message box should not be overlapped by it. ie we should be able to click/select the contents of the left side.
此消息框50%相对于的宽度应为 ，.container并且消息框的左侧不应与其重叠。即我们应该能够点击/选择左侧的内容。
Please find a sample here.
请在此处查找示例。
Please help me to solve this problem.
请帮我解决这个问题。
回答by Christoph
yourbox{
position:absolute;
right:<x>px;
top :<x>px;
}
positions it in the right corner. Note, that the position is dependent of the first ancestor-element which is not staticpositioned!
将其放置在右角。请注意，位置取决于第一个未static定位的祖先元素！
EDIT:
编辑：
回答by Z. Rahman Raju
yourbox {
position: absolute;
left: 100%;
top: 0;
}
left:100%;is the important issue here!
左：100%；是这里的重要问题！
回答by Yosef Tukachinsky
For top right corner try this:
对于右上角试试这个：
position: absolute;
top: 0;
right: 0;
回答by Alexander Ivashchenko
You can use "translateX"
您可以使用“ translateX”
<div class="box">
<div class="absolute-right"></div>
</div>
<style type="text/css">
.box{
text-align: right;
}
.absolute-right{
display: inline-block;
position: absolute;
}
/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>
回答by n8glenn
Simple, use absolute positioning, and instead of specifying a top and a left, specify a top and a right!
很简单，使用绝对定位，而不是指定顶部和左侧，而是指定顶部和右侧！
For example:
例如：
#logo_image {
width:80px;
height:80px;
top:10px;
right:10px;
z-index: 3;
position:absolute;
}
回答by KristofMols
Can you try the following:
您可以尝试以下操作：
float: right;
回答by Stephen Reid
I'm assuming that your container element is probably position:relative;. This is will mean that the dialog box will be positioned accordingly to the container, not the page.
我假设您的容器元素可能是position:relative;. 这意味着对话框将根据容器而不是页面进行定位。
Can you change the markup to this?
你能把标记改成这个吗？
<html>
<body>
<!-- Need to place this div at the top right of the page-->
<div class="ajax-message">
<div class="row">
<div class="span9">
<div class="alert">
<a class="close icon icon-remove"></a>
<div class="message-content">
Some message goes here
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Page contents starts here. These are dynamic-->
<div class="row">
<div class="span12 inner-col">
<h2>Documents</h2>
</div>
</div>
</div>
</body>
</html>
With the dialog box outside the main container then you can use absolute positioning relative to the page.
使用主容器外的对话框，您可以使用相对于页面的绝对定位。
