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

Question

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>

Have it or not, it is okay since a container that has a position:relative is needed when you have an element that is in absolute position and that you want that element to be on top of that container only. Other than that, forming a layout is easy with just some clearfix, display, float, and some other attributes you can use in making a layout. — user3771102, Aug 10 '16 at 03:48

Roko C. Buljan · Accepted Answer · 2016-08-10T03:54:15.797

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.

score 0 · Answer 2 · edited May 23 '17 at 12:00

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>

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

2 Answers2

Linked

Related