Positioning Elements Precisely - Beginning CSS3 - page 234

eliminate these problems, reset the position property to static in an internet
Explorer conditional comment in the head of the HTml page like this:
<!--[if lte IE 7]>

<style>
#header, #nav {
position: static;
}
#aside, #main {
margin-top: 15px;
}
</style>
<![endif]-->

The internet Explorer conditional comment is used only by iE 7 and earlier. By resetting the position
property to static , older versions of iE treat the page as it was at the beginning of the exercise.

■ Fixed positioning partially obscures the browser viewport. make sure your content remains accessible,
particularly on small screens. Check http://caniuse.com/css-fixed for up-to-date information on support in
mobile browsers.

Caution

Using Relative Positioning
Relative positioning moves an element relative to its normal position in the document flow, but without affecting
any nonpositioned elements. The second paragraph in relative.html demonstrates the basic principle by moving
it 50px down and 100px to the right with the following style rule:

#rel {
background-color: #999;
padding: 10px;
border: 1px solid #333;
position: relative;
top: 50px;
left: 100px;
}

Figure 11-6 shows the result. The relatively positioned paragraph obscures the beginning of the next
paragraph, but leaves a hole where it would normally have been.