我有一个页面,必须在不干扰实际页面的情况下显示动态消息框。此消息框必须出现在与现有内容重叠的页面右上角。
我尝试使用 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 许可协议
将其定位在右上角。请注意,该位置取决于不是
static
定位的第一个祖先元素!编辑:
我更新了你的小提琴。