Is globally defined position:relative to page container a good practice?

问题

My application has multiple pages and each page has a top class .page-container. There is dispute on setting relative positioning for page container. My understanding is all the content is relative to the page container. Any thoughts?

The example is as below:

.page-container {
  position: relative;
  background-color: #f3f3f3;
  padding: 10px;
}

.page-content {
  background-color: pink;
}

<body>
  <main class='page-container'>
    <div class='page-content'>content for each page </div>
  </main>
</body>

回答1:

Short: Use relative when you need to position inner absolute child elements respective to that relative element.

Setting position:relative; (instead of the default static) has specific uses, but yes, basically there's nothing wrong in doing so.
But after setting the position to relative you should know that i.e: absolute positioned child elements will be relative to that parent, instead to the first outer positioned grandparent.

Setting position (in general) is also wise when doing overflow.

In this jsBin example remove the CSS position: relative; comments and see the difference.

In your specific case where your position:relative; <main> is an immediate child of body, acting as a container, position:relative; could be a smart choice, although not needed.

回答2:

Well default position of div is static (i.e.position:static), so by assigning a position value to it as relative (i.e.position:relative) thus you are assigning new position to it, which is bit similar but only differs when your child element is positioned as absolute (i.e.position:absolute). So it's okay to assign position:relative multiple times and not too. But surely assign when your child element is positioned as absolute.

You can visit this which explain more about the difference between poistion:static and poistion:relative, Here....

1st example by assigning position:static to parent and absolute to child and top:0, you can see that child element goes outside of parent div.

.page-container {
  position:static;
  background-color:#111;
  padding: 10px;
}

.page-content {
  background-color: pink;
  position:absolute;
  top:0;
}

 <main class='page-container'>
    <div class='page-content'>content for each page </div>
  </main>

2nd example by assigning position:relative to parent and absolute to child and same top:0, you can see that child element remains inside of parent div takes child to top position at zero.

.page-container {
  position:relative;
  background-color:#111;
  padding: 10px;
}

.page-content {
  background-color: pink;
  position:absolute;
  top:0;
}

 <main class='page-container'>
    <div class='page-content'>content for each page </div>
  </main>

来源：https://stackoverflow.com/questions/38863750/is-globally-defined-positionrelative-to-page-container-a-good-practice

标签

css