Menu
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.
221
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.
If you want an absolutely-positioned element to appear on the right side of its parent div , you can use position: absolute; right: 0; -- as long as the parent div has a position property such as position:relative .
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.
88
yourbox { position: absolute; left: 100%; top: 0; } left:100%; is the important issue here!
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
