Fixed positioning is a common way to keep certain elements within the browser’s viewport. Quite often on various sites you can see a fixed navigation bar that does not change its position regardless of scrolling.
For fixed positioning of elements, you need to set the fixed value for the position property . After that, using the standard properties left, right, top and bottom you can determine the specific position of the fixed element.
Let’s create, for example, a fixed navigation bar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning in CSS3</title>
<style>
body {
margin: 0;
padding: 0;
}
.toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #222;
border-bottom: 1px solid #ccc;
}
.toolbar a {
color: #eee;
display: inline-block;
padding: 10px;
text-decoration: none;
font-family: Verdana
}
.content {
margin-top: 50px;
padding: 10px
}
</style>
</head>
<body>
<div class="toolbar">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contacts</a>
<a href="#">About</a>
</div>
<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry....</div>
</body>
</html>
To stretch a fixed block from the left to the right page border, three properties are set:
top: 0; left: 0; right: 0;
For the underlying block with the main content, the fixed element does not actually exist in the markup, since both the
fixed and absolute positioned block do not participate in the standard html flow. Therefore, by default, both blocks
will overlap and be placed at the same point. And we need to properly position the content block relative to the fixed
block, for example by setting the right padding:
margin-top: 50px;
The padding actually comes from the browser’s viewport borders, so the padding height must be greater than the height of
the fixed element.