Home >Web Front-end >CSS Tutorial >css what is relative positioning
css what is relative positioning
- WBOYOriginal
- 2024-02-23 11:39:041081browse
CSS relative positioning means that an element is positioned relative to its original position, and the moved position will not affect the layout of other elements.
The characteristic of relative positioning is that the element still occupies the original space without breaking away from the document flow or affecting the layout of other elements. Its positioning is calculated relative to the element itself, and the position of the element can be specified through the top, right, bottom, and left attributes.
The following is a specific code example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>In the above example, we created a container with a width of 300px and a height of 300px, with a background color of lightgrey. Then a box with a width of 100px and a height of 100px is created inside the container, with a background color of red. By adding the position: relative attribute to the box, we set the box to relative positioning.
Next, we move the box 50px down and to the right using the top: 50px and left: 50px properties. This moves the box down and to the right relative to its original position.
It should be noted that the movement of relative positioning is relative to the element itself, so although the box has moved, it still occupies its original position. Other elements will not be affected and no layout changes will occur.
To sum up, relative positioning is a way of positioning relative to its original position. The moved position will not affect the layout of other elements. The position of the element can be controlled through the top, right, bottom and left attributes.
The above is the detailed content of css what is relative positioning. For more information, please follow other related articles on the PHP Chinese website!