No, no, there are still people who don’t know the difference between absolute positioning and relative positioning

Time:2020-10-27

The difference between relative positioning and absolute positioning

Relative positioning

position:relative

Moving relative to the original position, the element does not leave the document flow and does not affect the layout of other elements

For example

.box {
      position: relative;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
Copy code
<body>
    <div class="box"></div>
</body>
Copy code

No, no, there are still people who don't know the difference between absolute positioning and relative positioning

It can be seen from the pictureboxOffset from the original position after positioning100px, left offset100px

Absolute positioning


position:absolute

The element will leave the document flow, and if the offset is set, the location of other elements will be affected

1. Relative to the nearest nonstaticAncestor element localization

For example

body{
          position: relative;
          height: 100px;
        }

    .box {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
Copy code

No, no, there are still people who don't know the difference between absolute positioning and relative positioning

It can be seen from the pictureboxParent element relative to relative positioning after absolute positioningbodyUpper offset100px, left offset100px

2. When the ancestor element described in 1 does not exist, the element is relative toInitial inclusion blocklocation

For example

Initial include block: a rectangle containing the root element HTML. His size is the view port (for continuous media) or page media (for paged media)

body{
        height: 100px;
      }

    .box {
      position: absolute;
      bottom: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
Copy code

No, no, there are still people who don't know the difference between absolute positioning and relative positioning

It can be seen from the pictureboxAfter absolute positioning, the offset is lower relative to the initial containing block100px, left offset100px

A lot of information on the Internet says that when there is no relative positioning in the parent element, then its reference isbodyperhapshtmlIt’s all wrong. Interested partners can have a try

Shorthand chart

No, no, there are still people who don't know the difference between absolute positioning and relative positioning

Source code

  • Relative positioning
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <style> * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    } </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
Copy code
  • Absolute positioning 1
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <style> * {
      margin: 0;
      padding: 0;
    }

    body{
      position: relative;
      height: 100px;
    }

    .box {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    } </style>
</head>
<body>

<div class="box"></div>

</body>
</html>
Copy code
  • Absolute positioning 2
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta charset="UTF-8">
  <style> * {
      margin: 0;
      padding: 0;
    }

    body{
      height: 100px;
    }

    .box {
      position: absolute;
      bottom: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    } </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Recommended Today

Blog based on beego, go blog

Go Blog A beego based development, can quickly create personal blog, CMS system Include functions see Official website of go bloggo-blog.cn Demo siteleechan.online Update log time function January 23, 2020 New top post function February 2, 2020 New custom navigation function February 4, 2020 New site announcement function February 6, 2020 New link module February […]