How to place a div on the right side with absolute position
Solution 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:
Solution 2
yourbox {
position: absolute;
left: 100%;
top: 0;
}
left:100%; is the important issue here!
Solution 3
For top right corner try this:
position: absolute;
top: 0;
right: 0;
Solution 4
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>
Solution 5
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;
}
Comments
-
Arun P Johny almost 2 years
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 useleft
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.
-
cssyphus about 10 years
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. -
Jhourlad Estrella over 4 yearsThis assumes that
yourbox
is 100% of the window width -
Jacob Lockard about 4 yearsWhile
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. -
ruffin almost 4 years(-‸ლ) That works. (MDN link for the doubters)