CSS and message

Hi,

I want to position a message box at the bottom right corner of the page. What CSS do I need ?

Here is the example I am trying to do…

Hey there @winzip
It sounds like what you would be able to do in css is absolutely position the box to the bottom right with position: absolute; bottom: 0; right: 0;
You would attach that to any class ( . ) or id ( # ) you put on the box itself.

Hope this helps.

I have attached a web page which display how you can put your message box in right bottom corner.
index16.html (298 Bytes)

Hi,

If the message is to sit in the bottom right of the viewport on top of the current elements the you would need position:fixed as position:absolute will scroll away with content.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.message-box{
	position:fixed;
	right:0;
	bottom:0;
	height:20px;
	padding:10px;
	width:200px;
	text-align:center;
	background:rgba(0,0,0,0.5);
	z-index:99;/* must be higher than any other elements on page */	
}
</style>
</head>

<body>
<div class="message-box">Message</div>
</body>
</html>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.