Detailed explanation of relative positioning of CSS positioning properties relative properties-CSS Tutorial-php.cn

Detailed explanation of relative positioning of CSS positioning properties relative properties

WBOY

Release： 2022-08-02 18:18:03

Original

6112 people have browsed it

This article brings you relevant knowledge about css, which mainly introduces issues related to relative positioning in CSS positioning attributes. Relative positioning is when the element moves. Relative to its original position, the element frame set to relative positioning will be offset by a certain distance. Let's take a look at it. I hope it will be helpful to everyone.

Detailed explanation of relative positioning of CSS positioning properties relative properties

(Learning video sharing: css video tutorial, html video tutorial)

CSS positioning attribute Detailed explanation of relative positioning relative attribute

position:relative Detailed explanation of relative positioning

Relative positioning means that when an element moves, it is relative to its original position.

Characteristics of relative positioning:

It moves relative to its original position (when moving the position, the reference point is its original position)
The original position in the standard stream continues to be occupied, and the subsequent boxes still treat it as a standard stream (without going off the standard, continuing to retain the original position). Therefore, relative positioning is not out of standard. Its most typical application is for absolute positioning.

The element box set to relative positioning will be offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.

CSS Relative Positioning

Relative positioning is a very easy concept to master. If an element is positioned relatively, it will appear where it is. You can then move the element "relative to" its origin by setting a vertical or horizontal position.

If top is set to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right.

#box_relative {    position: relative;    left: 30px;    top: 20px;  }

Copy after login

As shown below:

Detailed explanation of relative positioning of CSS positioning properties relative properties

Note that when using relative positioning, the element still occupies the original space regardless of whether it is moved or not. Therefore, moving an element causes it to cover other boxes.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
    /* 设置相对定位 ,相对点是当前div的原始位置的左上角*/
    position: relative;
    /* 距离div的原始位置的左边框 */
    left:20px;
    /* 距离div的原始位置的上边框 */
    top:30px;
    /*
       right距离div的原始位置的右边框
       bottom距离div的原始位置的下边框
    */
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside">div1</div>
    <div class="inside1">div2</div>
</div>
</body>
</html>

Copy after login

Output result:

Detailed explanation of relative positioning of CSS positioning properties relative properties

The impact of relative positioning on document flow

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
    margin:10px;
    font-size:12px;
    font-family:Arial;
}
.outside{
    width:1000px;
    height:600px;
    background-color:#a9d6ff;
    border:1px dashed black;
}
 
.inside{
    padding:10px;
    background-color:#fffcd3;
    border:1px dashed black;
    margin: 10px;
    position:relative;
    left:30px;
    top:30px;
    /* div1相对定位脱离了文档流，
        但是后续的div还会认为div1是在没有相对定位之前的状态
        所有后续的div不会填补div1的空缺位置，而是继续按照文档流来排序    
    */
}
 
.inside1{
    margin:10px;
    padding: 10px;
    background-color:#fffcd3;
    border:1px dashed black;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside">div1</div>
    <div class="inside1">div2</div>
</div>
</body>
</html>

Copy after login

Output result:

Detailed explanation of relative positioning of CSS positioning properties relative properties

(Learning video sharing: css video tutorial, html Video tutorial)

The above is the detailed content of Detailed explanation of relative positioning of CSS positioning properties relative properties. For more information, please follow other related articles on the PHP Chinese website!