如何在右侧放置一个具有绝对位置的div

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. Also I'm unable to use left since I've to support responsive design from 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. ie we should be able to click/select the contents of the left side.

这个消息框对.container的宽度应该是50%，而消息框的左侧不应该被它重叠。我们应该能够点击/选择左边的内容。

Please find a sample here.

请在这里找一个样品。

Please help me to solve this problem.

请帮助我解决这个问题。

7 个解决方案

#1

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!

把它放在右边的角落。注意，位置依赖于第一个不是静态定位的祖先元素!

EDIT:

编辑:

I updated your fiddle.

我更新了你的小提琴。

#2

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

left:100%; is the important issue here!

左:100%;这是重要的问题!

#3

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>

#4

I'm assuming that your container element is probably position:relative;. This is will mean that the dialog box will be positioned accordingly to the container, not the page.

我假设容器元素可能是位置:relative;这意味着对话框将相应地定位到容器，而不是页面。

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.

有了主容器外的对话框，就可以使用相对于页面的绝对位置。

#5

try this:

试试这个:

left: calc(100% - [the width of your div]px);

左:calc(100% -[您的div宽度]px);

#6

Can you try the following:

你能试试下面的方法吗?

float: right;

#7

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

#1

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