Aru*_*hny 33 html css css-position absolute
我有一个页面,必须在不打扰实际页面的情况下显示动态消息框.此消息框必须出现在页面的右上角,与现有内容重叠.
我试过用,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并且消息框的左侧不应与其重叠.即我们应该能够点击/选择左侧的内容.
请在这里找到样品.
请帮我解决这个问题.
Chr*_*oph 48
yourbox{
position:absolute;
right:<x>px;
top :<x>px;
}
把它放在右角.注意,位置取决于未static定位的第一个祖先元素!
编辑:
小智 37
yourbox {
position: absolute;
left: 100%;
top: 0;
}
左:100%; 这是重要的问题!
您可以使用“ 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>