如何以绝对位置将div放在右侧

新手上路,请多包涵

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

我尝试使用 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>

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

在此处 查找样本。

请帮我解决这个问题。

原文由 Arun P Johny 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1k
2 个回答
yourbox{
   position:absolute;
   right:<x>px;
   top  :<x>px;
}

将其定位在右上角。请注意,该位置取决于不是 static 定位的第一个祖先元素!

编辑:

我更新了你的小提琴

原文由 Christoph 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

左:100%; 重要的是这里!

原文由 Z. Rahman Raju 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题