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   lt html gt       lt body gt           lt div class  container  gt               lt  -- Need to place this div at the top right of the page-- gt               lt div class  ajax-message  gt                   lt div class  row  gt                       lt div class  span9  gt                           lt div class  alert  gt                               lt a class  close icon icon-remove  gt  lt  a gt                               lt div class  message-content  gt                                  Some message goes here                              lt  div gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt               lt  -- Page contents starts here  These are dynamic-- gt               lt div class  row  gt                   lt div class  span12 inner-col  gt                       lt h2 gt Documents lt  h2 gt                   lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    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

User · Answer

Can you try the following   float  right

User · Answer

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    lt html gt   lt body gt       lt  -- Need to place this div at the top right of the page-- gt           lt div class  ajax-message  gt               lt div class  row  gt                   lt div class  span9  gt                       lt div class  alert  gt                           lt a class  close icon icon-remove  gt  lt  a gt                           lt div class  message-content  gt                              Some message goes here                          lt  div gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt div class  container  gt           lt  -- Page contents starts here  These are dynamic-- gt           lt div class  row  gt               lt div class  span12 inner-col  gt                   lt h2 gt Documents lt  h2 gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt   lt  html gt    With the dialog box outside the main container then you can use absolute positioning relative to the page

User · Answer

You can use  translateX    lt div class  box  gt   lt div class  absolute-right  gt  lt  div gt   lt  div gt    lt style type  text css  gt   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       lt  style gt

User · Answer

yourbox      position  absolute     left  100      top  0      left 100   is the important issue here

User · Answer

yourbox     position absolute     right  lt x gt px     top    lt x gt 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

User · Answer

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

User · Answer

For top right corner try this   position  absolute  top  0  right  0

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

Examples related to html

Examples related to css

Examples related to css-position

Examples related to absolute