当前位置：网站首页>Relative positioning

Relative positioning

2022-07-27 13:21:00 【Sorry, this person doesn't exist】

Relative positioning 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .box1{
      width: 200px; height: 200px; background-color: #bbffaa; } .box2{
      width: 200px; height: 200px; background-color: orange; position:relative; left:200px; top:-200px; /*  location （position） - Positioning is a more advanced means of layout  - By positioning, you can place elements anywhere on the page  - Use position Property to set the location   Optional value ： static  The default value is , The element is the static beauty opening positioning  relative  Relative open elements  absolute  Open the fixed positioning of elements  sticky  Open the bonding and positioning of elements  */ } .box3{
      width: 200px; height: 200px; background-color: yellow; } </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

 -- Relative positioning ：
                        - When the element of position Property value set to relative It turns on the relative positioning of elements 
                        - The characteristics of relative positioning ：
                            1. After the relative positioning of the element is turned on , If the offset is not set, the element will not change 
                            2. Relative positioning refers to the location of elements in the document stream 
                            3. Relative positioning will raise the level of elements 
                            4. Relative positioning doesn't take elements out of the document stream 
                            5. Relative positioning does not change the nature of the element, block or block , In the industry or in the industry 
                    - Offset （offfset）
                         - When element positioning is turned on , You can set the position of the element by the offset 
                            top
                               - The distance between the positioning element and the upper edge of the positioning position 
                            bottom
                               - The distance between the positioning element and the lower edge of the positioning position 

                               - The vertical position of the positioning element is determined by top and bottom Two attributes to control 
                                     Usually we only use one of them 
                                -top The bigger the value is. , Positioning elements go down 
                                -bottom The bigger the value is. , The higher the positioning element goes 
                            left
                                - The left distance between the positioning element and the positioning position 
                            right
                                - The right distance between the positioning element and the positioning position 

                                - The horizontal position of the positioning element is determined by left and right Two properties control , Usually only one... Will be used 
                                -left The larger the element, the more to the right 
                                -right The larger the element, the more to the left
原网站

版权声明
本文为[Sorry, this person doesn't exist]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271110149682.html

边栏推荐

猜你喜欢

随机推荐