CSS provides element positioning capabilities, meaning we can place an element at a specific location on the page.
The main property that controls positioning in CSS is the position property . This property can take one of the following values:
- static : standard element positioning, default value
- absolute : the element is positioned relative to the bounds of the container element, unless its property positionis equal tostatic
- relative : The element is positioned relative to its default position. Generally, the main purpose of relative positioning is not to move an element, but to set a new anchor point for absolute positioning of nested elements.
- fixed : the element is positioned relative to the browser window, this allows you to create fixed elements that do not change position when scrolling
You should not simultaneously apply the float property and any type of positioning other than static (that is, the default type) to an element.
Absolute positioning
The browser’s viewport has top, bottom, right, and left edges. For each of these four edges, there is a corresponding CSS property: left(left margin), right(right margin), top(top margin of the container), and bottom(bottom margin). The values of these properties are specified in pixels, ems, or percentages. It is not necessary to set values for all four sides. As a rule, only two values are set – the indent from the top edge of the top and the indent from the left edge of the left.
<!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>
</head>
<body>
<div class="header"></div>
<p>HELLO WORLD</p>
</body>
</html>
Here the absolutely positioned div element will be 200px to the left of the viewport border and 80px from the bottom.
It is not so important that after this div element there are some other elements. This div block will in any case be positioned relative to the boundaries of the browser’s viewport.
If an element with absolute positioning is located in another container, which in turn has a property value position not equal to static, then the element is positioned relative to the boundaries of the container:
<!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>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Relative positioning
Relative positioning is also set using the relative value . To specify the specific position to which the element is shifted, the same top, left, right, bottom properties are applied:
<!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>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
z-index property
By default, when two border elements match, the last element defined in the html markup is displayed on top of the other. However, the z-index property allows you to change the order of elements when they overlap. The property takes a number as its value. Elements with a higher value for this property will appear on top of elements with a lower z-index value.
For example:
<!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>
</head>
<body>
<div class="content">
<div class="redBlock"></div>
<div class="blueBlock"></div>
</div>
</body>
</html>
Now let’s add a new rule to the style of the redBlock block:
.redBlock{
z-index: 100;
position: absolute;
top: 20px;
left:50px;
width: 80px
height: 80px;
background color: red
}
Here the z-index is 100. But it doesn’t have to be 100. Since the second block has no z-index and is actually zero, we can set the z-index property of the redBlock to any value greater than zero.
And now the first block will be superimposed on the second, and not vice versa, as it was at the beginning:
