Monday, October 6, 2014

Fixed DIV for Browsers (Including IE and Tablets) using CSS

Without using Javascript, CSS is enough to do the job:


<!DOCTYPE HTML>
<html>

<style type="text/css">
#fixit { position: absolute; left: 10px; top: 10px; }
div > div#fixit { position: fixed; }

</style>

<body>

<div>
<div id="fixit" style="border:2px solid #333;background-color:#ddd;text-align:center;padding:10px;"> Hello </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>


Try scrolling the page. The "Hello" tag won't move. Please pay attention to those in green. Especially the DOCTYPE declaration.

No comments:

Post a Comment