当前位置：网站首页>Correlation analysis of position attribute value

Correlation analysis of position attribute value

2022-07-22 06:21:00 【Dummerd】

position The property values for are ：
1. absolute： Absolute positioning , Is relative to the nearest and not static Locate the parent element of the ( Will break away from the document stream )

2.  fixed： Absolute positioning , Is positioned relative to the browser window , Is constant , Won't scroll with the screen .( Will break away from the document stream )

3.  relative： Relative positioning , Is positioned relative to its original position .( Does not break away from the document stream )

4.  static： The default value is , No location .

5. Inherit： Inheriting from the parent element position value .
 

First of all to see position：  relative         Relative positioning 


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }
 
        .div1 {
            background-color: red;
        }
 
        .div2 {
            background-color: green;
        }
 
        .div3 {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
 
</html>

Now we're right div2 Use relative positioning , Add style position: relative;（ Relative positioning ）

top: 22px;left: 33px;

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        div {
            height: 50px;
            width: 50px;
        }
 
        .div1 {
            background-color: red;
        }
 
        .div2 {
            background-color: green;
            position: relative;
            top: 22px;
            left: 33px;
        }
 
        .div3 {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</body>
 
</html>

 position： absolute         Absolute positioning （！ Note that this will break away from the document flow ）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title> Absolute positioning </title>
    <style>
    #div {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            position: absolute;
            left: 110px;
            top: 110px;
        }
    </style>
</head>
 
<body>
 
    <div id="div"></div>
 
</body>
 
 
 
</html>

At this time, set the distance from the top after positioning 110px, From the left 110px

It is worth mentioning that after the element is set to absolute positioning , His original position will be occupied by other elements , It's also called breaking away from the document stream

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211426211277.html

边栏推荐

猜你喜欢

随机推荐