如何使用绝对 position 在右侧放置一个 div
[英]How to place a div on the right side with absolute position
问题描述
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: absolute but then I'm unable to place it in the right corner.我尝试使用position: absolute但我无法将它放在右上角。 Also I'm unable to use left since I've to support responsive design from Bootstrap.我也无法使用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 .container and the left side of the message box should not be overlapped by it.此消息框的宽度应为.container的50% ，并且消息框的左侧不应与其重叠。 ie we should be able to click/select the contents of the left side.即我们应该能够单击/选择左侧的内容。
Please find a sample here .请在此处查找样本。
Please help me to solve this problem.请帮我解决这个问题。
8 个解决方案
解决方案1
67 已采纳 2012-03-16 10:26:44
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 static positioned!请注意，位置取决于第一个非static定位的祖先元素！
EDIT:编辑：
解决方案2
50 2013-12-15 10:55:45
yourbox {
position: absolute;
left: 100%;
top: 0;
}
left:100%;左：100%； is the important issue here!是这里的重要问题！
解决方案3
20 2018-04-24 07:37:16
For top right corner try this:对于右上角试试这个：
position: absolute;
top: 0;
right: 0;
解决方案4
5 2016-04-15 16:50:22
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>
解决方案5
3 2018-04-03 20:08:20
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;
}
解决方案6
1 2012-03-16 10:27:39
您可以尝试以下操作：
float: right;
解决方案7
1 2012-03-16 10:34:24
I'm assuming that your container element is probably position:relative;我假设您的容器元素可能是position:relative; . . This is will mean that the dialog box will be positioned accordingly to the container, not the page.这意味着对话框将根据容器而不是页面进行定位。
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.使用主容器外的对话框，您可以使用相对于页面的绝对定位。
解决方案8
0 2022-09-16 09:33:32
It worked for me:它对我有用：
.yourbox {
position: absolute;
display: block;
top: 0;
right: 0;
left: inherit;
}
It is important here - left: inherit;这里很重要——左：继承；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.