But what if we don't want javascript? As Coothead made clear in this DynamicDrive-thread, we can obtain what we want by putting an exact invisibe copy of the topbar div just before or after it and then replacing position: fixed with position: relative (for the copy). Also, we should remove from the copy all CSS that is not relevant for elements having position: relative (like right: 0 etc.). Another possibility is to just remove position: fixed and all 'non-relevant CSS' in the copy. The content bar will now be displayed at the correct (top) position, since we have mimicked a situation where a div having position: relative is put beneath another div having the same CSS-property.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
</head>
<body>
<!-- TOP BAR: FIXED POSITION -->
<div style="position: fixed; left: 0; top: 0; right: 0; padding: 1.25em; background: #f00; text-align: center ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>
<!-- COPY: RELATIVE POSITION. IRRELEVANT CSS REMOVED -->
<div style="position: relative; visibility: hidden; padding: 1.25em; ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>
<div style="padding: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
</head>
<body>
<!-- TOP BAR: FIXED POSITION -->
<div style="position: fixed; left: 0; top: 0; right: 0; padding: 1.25em; background: #f00; text-align: center ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>
<!-- COPY: RELATIVE POSITION. IRRELEVANT CSS REMOVED -->
<div style="position: relative; visibility: hidden; padding: 1.25em; ">
<h1>Top bar</h1>
Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam ac, lobortis volutpat ipsum. Donec eu imperdiet.
</div>
<div style="padding: 20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</div>
</body>
</html>