How to place a div on the right side with absolute position

Question

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.

Please find a sample here.

Please help me to solve this problem.

http://stackoverflow.com/questions/11333624/css-float-right-and-position-absolute-doesnt-work-together — Nick, Jan 08 '16 at 18:57

Christoph · Accepted Answer · 2012-03-16T10:35:12.420

63

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.

edited Mar 16 '12 at 10:35

answered Mar 16 '12 at 10:26

Christoph

46,101
18
92
121

score 51 · Answer 2 · edited Jun 24 '15 at 10:16

51

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

left:100%; is the important issue here!

edited Jun 24 '15 at 10:16

user2771704

5,204
6
33
38

answered Dec 15 '13 at 10:55

Z. Rahman Raju

605
5
4

4

`left:100%` puts the LEFT edge of the div at the far right side of the window, so the rest of the div is hidden. `left:94%` worked for me. Great solution, thanks. – cssyphus Mar 15 '14 at 03:05
1

I LOLed so hard. This assumes that `yourbox` is 100% of the window widthXDXDXDXD – Jhourlad Estrella Dec 03 '19 at 13:26
While `left: 100%` is not always what you would want, in my case, it was perfect, as it positioned the *left* edge of the div relative to the *right* edge of its container. – Jacob Lockard May 08 '20 at 20:34

Yosef Tukachinsky · Answer 3 · 2020-02-20T12:39:45.330

20

For top right corner try this:

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

edited Feb 20 '20 at 12:39

answered Apr 24 '18 at 07:37

Yosef Tukachinsky

4,839
7
26

score 4 · Answer 4 · answered Apr 15 '16 at 16:50

You can use "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>

score 3 · Answer 5 · answered Apr 03 '18 at 20:08

3

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

answered Apr 03 '18 at 20:08

n8glenn

41
2

(－‸ლ) That works. ([MDN link](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for the doubters) – ruffin Jun 19 '20 at 20:20

score 1 · Answer 6 · answered Mar 16 '12 at 10:27

1

Can you try the following:

float: right;

answered Mar 16 '12 at 10:27

KristofMols

3,103
2
36
46

score 1 · Answer 7 · answered Mar 16 '12 at 10:34

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.

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.

How to place a div on the right side with absolute position

7 Answers7