Fixed Positioning Example
This is a box positioned at a
fixed position and should not scroll
This is a box
positioned at absolute position and should scroll
Example code:
<style
type="text/css">
.box1 {
position: fixed;
left: 1em;
top: 1em;
border: 3px solid black;
padding: .5em;
width: 8em;
text-align: center;
font-weight: bold;
font-size: large;
background: red;
color: white}
.box2 {
position: absolute;
left: 14em;
top: 8em;
border: 3px solid black;
padding: .5em;
width: 8em;
height: 10em;
text-align:
center;
font-weight: bold;
font-size: large;
background: blue;
color: white}
</style>
.....
<div class="box1">This is a box positioned at a fixed position and should not scroll</div><div class="box2">This is a box positioned at absolute position and should scroll</div>
....
.box1 {
position: fixed;
left: 1em;
top: 1em;
border: 3px solid black;
padding: .5em;
width: 8em;
text-align: center;
font-weight: bold;
font-size: large;
background: red;
color: white}
.box2 {
position: absolute;
left: 14em;
top: 8em;
border: 3px solid black;
padding: .5em;
width: 8em;
height: 10em;
text-align:
center;
font-weight: bold;
font-size: large;
background: blue;
color: white}
</style>
.....
<div class="box1">This is a box positioned at a fixed position and should not scroll</div><div class="box2">This is a box positioned at absolute position and should scroll</div>
....