Fixed And Absolute Position CSS Property

March 29th, 2011 by aditia rahman / 2 Comments  

     

I wondering how to create a toolbar that always show on the page when user scrolling up or scrolling down the windows, the answer is easy use CSS position property and playing with the CSS top and left property. These two example below are the sites using fixed CSS position.

stackoverflow

Stackoverflow put the welcome message on the top, on the right corner there are link to hide the message if the user feel it disturbing and another one is facebook that put the chat box to keep visible on the bottom right on the page.

Example Code

In this example code I show the different between using fixed and absolute position properties, when user scrolling a window, the element which using absolute position need be redeclare the CSS top and left (I’m using JQuery to changing the CSS property value), otherwise the fixed CSS will keep on the position that look static.

<!DOCTYPE html>
<html>
<head>
	<title>Fixed & Absolute Position CSS Property</title>
	<script type="text/javascript" src="jquery-1.5.min.js"></script>
	<script type=text/javascript>
	$(document).ready(function() {
		var wHeight = $(window).height();
		var wWidth = $(window).width();

		var tbBottomWidth = $("#tb_bottom").width();
		var tbBottomHeight = $("#tb_bottom").height();

		var tbLeft = (wWidth - tbBottomWidth) / 2;

		// set default position for top and bottom
		$("#tb_top").css({"top": 0, "left": tbLeft});
		$("#tb_bottom").css({"top": parseInt(wHeight - tbBottomHeight - 20) + "px", "left": tbLeft});

		var wMid = $("#mid").width() + 40;
		var wMidAnimate = $("#mid_animate").width() + 40;

		// set default position for middle
		var midLeft = (wWidth - wMid) / 2;
		var midAnimateLeft = (wWidth - wMidAnimate) / 2;
		$("#mid").css("left", midLeft + "px");
		$("#mid_animate").css("left", midAnimateLeft + "px");

		var midTop = parseInt($("#mid").css("top").replace("px", ""));
		var midAnimateTop = parseInt($("#mid_animate").css("top").replace("px", ""));

		$(window).scroll(function() {
			var scrollTop = $(this).scrollTop();

			$("#mid").css({top: (midTop + scrollTop) + "px"});
			$("#mid_animate").animate({top: (midAnimateTop + scrollTop) + "px"}, 100);
		});
	});
	</script>
	<style type="text/css">
	* {
		font-family: Arial, "Free Sans";
	}
	body {
		margin: 0;
		padding: 0;
	}

	#container {
		border-left: 8px dashed #666666;
		border-right: 8px dashed #666666;
		width: 500px;
		margin: 0 auto;
		height: 1800px;
	}
	#tb_top {
		-webkit-border-radius: 0 0 1.0em 1.0em;
        -moz-border-radius: 0 0 1.0em 1.0em;
        border-radius: 0 0 1.0em 1.0em;
	}
	#tb_bottom {
		-webkit-border-radius: 1.0em 1.0em 0 0;
        -moz-border-radius: 1.0em 1.0em 0 0;
        border-radius: 1.0em 1.0em 0 0;
	}
	.tb {
		position: fixed;
		width: 550px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		background: #666666;
		color: #ffffff;
		padding: 10px 0;
	}
	.mid {
		font-size: 18px;
		font-weight: bold;
		position: absolute;
		background: #666666;
		color: #ffffff;
		padding: 20px;
		-webkit-border-radius: 1.0em;
        -moz-border-radius: 1.0em;
        border-radius: 1.0em;
	}
	#mid {
		top: 200px;
		left: 300px;
	}
	#mid_animate {
		top: 300px;
		left: 300px;
	}
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="mid" class="mid">CSS { position: absolute }</div>
	<div id="mid_animate" class="mid">CSS { position: absolute } with JQuery Animate</div>
	<div id="tb_top" class="tb">CSS { position: fixed }</div>
	<div id="tb_bottom" class="tb">CSS { position: fixed }</div>
</body>
</html>

If you are using absolute position I suggest to add the animate function, cause if you just changing the CSS top or left when the window scrolling it will looks like blinking, actually this is just the CSS changing value with JQuery, or just use fixed value, for static position. Here are the demo, but in Opera and IE the element with animation got a little buggy.

View Demo

CSS fixed & absolute position

Other Resources

Fixed Floating Elements by jqueryfordesigners

jQuery Sticky Scroller / Position:Fixed Plugin by vertstudios

Keep element in view while scrolling using jQuery by wduffy

        submit to reddit Delicious

2 Comments Leave a Comment Subscribe RSS

  • Hey there,
    The scrolling idea becomes much more complex the moment you want to factor in IE7. The scrollTop accumulation is extremely choppy, and the best way to handle it at that point is to alternate between position: fixed and position: absolute at certain intervals. You can hack position:fixed for IE7 by wrapping your container in a div styled with position fix, and making the contents inside absolutely positioned to (0,0).

    Good read, though, and I appreciate the citation!

  • I charge considerably more if people want a site to work in IE7. 10 years of writing IE hacks for IE6 and IE7 have taken their toll. IE6 is about 1.6% of users in the UK and IE7 is not a lot more. It’s not worth the effort.

    More users had Chrome 15 than IE8 last month in the UK. The good news in I haven’t had to write any hacks for IE9 yet.

Leave a Comment