如何使用绝对 position 在右侧放置一个 div

Question

我有一个页面，必须在不干扰实际页面的情况下显示动态消息框。 此消息框必须出现在与现有内容重叠的页面右上角。

我尝试使用position: absolute但我无法将它放在右上角。 我也无法使用left ，因为我必须支持 Bootstrap 的响应式设计。

这是一个示例标记

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

此消息框的宽度应为.container的50% ，并且消息框的左侧不应与其重叠。 即我们应该能够单击/选择左侧的内容。

请在此处查找样本。

请帮我解决这个问题。

Answer 1

yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

将其放置在右角。 请注意，位置取决于第一个非static定位的祖先元素！

编辑：

我更新了你的小提琴。

Answer 2

yourbox {
   position: absolute;
   left: 100%;
   top: 0;
}

左：100%； 是这里的重要问题！

Answer 3

对于右上角试试这个：

position: absolute;
top: 0;
right: 0;

Answer 4

您可以使用“ 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>

Answer 5

很简单，使用绝对定位，而不是指定顶部和左侧，而是指定顶部和右侧！

例如：

#logo_image {
    width:80px;
    height:80px;
    top:10px;
    right:10px;
    z-index: 3;
    position:absolute;
}

Answer 6

您可以尝试以下操作：

float: right;

Answer 7

我假设您的容器元素可能是position:relative; . 这意味着对话框将根据容器而不是页面进行定位。

你能把标记改成这个吗？

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

使用主容器外的对话框，您可以使用相对于页面的绝对定位。

Answer 8

它对我有用：

.yourbox {
    position: absolute;
    display: block;
    top: 0;  
    right: 0;
    left: inherit;
}

这里很重要——左：继承；

如何使用绝对 position 在右侧放置一个 div

问题描述

8 个解决方案

解决方案1
67 已采纳 2012-03-16 10:26:44

解决方案2
50 2013-12-15 10:55:45

解决方案3
20 2018-04-24 07:37:16

解决方案4
5 2016-04-15 16:50:22

解决方案5
3 2018-04-03 20:08:20

解决方案6
1 2012-03-16 10:27:39

解决方案7
1 2012-03-16 10:34:24

解决方案8
0 2022-09-16 09:33:32

如何使用绝对 position 在右侧放置一个 div

问题描述

8 个解决方案

解决方案1 67 已采纳 2012-03-16 10:26:44

解决方案2 50 2013-12-15 10:55:45

解决方案3 20 2018-04-24 07:37:16

解决方案4 5 2016-04-15 16:50:22

解决方案5 3 2018-04-03 20:08:20

解决方案6 1 2012-03-16 10:27:39

解决方案7 1 2012-03-16 10:34:24

解决方案8 0 2022-09-16 09:33:32

解决方案1
67 已采纳 2012-03-16 10:26:44

解决方案2
50 2013-12-15 10:55:45

解决方案3
20 2018-04-24 07:37:16

解决方案4
5 2016-04-15 16:50:22

解决方案5
3 2018-04-03 20:08:20

解决方案6
1 2012-03-16 10:27:39

解决方案7
1 2012-03-16 10:34:24

解决方案8
0 2022-09-16 09:33:32