Is Globally Defined Position:Relative to Page Container a Good Practice

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

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.

Difference between static and relative positioning

Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:

Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:

There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:

And when a position: relative is applied to a parent element in the hierarchy:

Note how our absolutely-position element is bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:

Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:

..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

With absolute positioning and fixed positioning, the elements are taken out of HTML flow.

Is it considered bad practice to use absolute positioning?

For a chess like game such as you are developing, there is nothing inherently wrong with using absolute positioning. As you said, relative positioning and normal flow layout make this sort of task quite difficult.

Of course, if you were developing a more standard website, such as a site providing some public service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users. In this case I would avoid it.

Having said that, a lesser known benefit of absolute positioning is that it allows localized absolute positioning within the nearest "positioned" parent element.

Note: A "positioned" element can be any of the following: relative, fixed, absolute, or sticky.

To explain:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute;left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Here, childDIV is actually positioned 20px from the left and 20px from the top of parentDIV, NOT the overall document. This gives a nice precise control over nested elements on a page, without sacrificing the overall page flow-layout.

So to answer your question (relative positioning being preferred over absolute): I don't believe there is a correct answer, it depends on what you are needing to build. However in general positioning (absolute or relative) versus default flow layout, my approach is as described above.

Making Youtube video responsive towards centre of web page

There is no need to over engineer this, all you need is:

FULL CODE for FULLSCREEN

CLICK FOR DEMO

CSS

html,body{ margin:0; padding:0; height:100%; width:100%; }
#wrap-player{
    height:100%;
    width:100%;
    overflow:hidden;
}

HTML

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>

---

Explanation

• margin/padding: 0

Often referred to as a global reset. This process simply sets defaults for margin and padding and therefore eliminates any browser specific defaults which often vary.

• html: 100%

By default the html of a page is only as high as the content it contains.
Setting the html's height to 100% will cause the height to become the height of the browsers visible area.

• body: 100%

The body follows the same rendering principals as the html. By setting height 100% we ask the body to fill the height of its container, in this case that is the html.

• site div: 100%

It is generally a nice practice to have a master div that wraps the entire website, granting full control over the layout without over manipulating the body tag. Setting height 100% will make the div fill the height of its container, in this case the body tag.

From here on there is a cascading effect that will allow any subsequent block level content to fill the height of its container. This will always be 100% unless we set it other wise.

Any block level element with a height of 100% placed inside the content div as in the image will only ever become the height of its container and as such will not fill the screen.

(Note: making an element position fixed/absolute will remove it from the document flow. In most cases its container and therefore its height will be determined by the next relative positioned parent element encountered.)

• overflow: hidden

By default even when an element has no scroll, scrollbars will often still be shown. Setting overflow hidden simply removes the overflowing content and consequently the scrollbars. As content is never going to overflow in this instance, they are not necessary.

• iframe: 100%

Youtube uses iframes to embed its video content and so setting the height to 100% will make the height of the iframe and subsequently the video within the height of its container.

I recommend setting the height to 100% on the iframe itself as above and not in css for two reasons:

1. If you have more than one iframe in your website the height will be set for them all. If this is desired then that is not a problem.

2. When copying embed code from youtube a default height and width is always set. iframes should have a height and width attribute applied to them directly. I personally do not think setting a height/width and then overwriting with css is good practice.

(Note: This is contrary to my own opinion that all styling should be done within css)

If all parent containers above the iframe are set to 100% all the way up to the html element; the video will be the height of the browsers visible window.

Sizing elements to percentage of screen width/height

FractionallySizedBox may also be useful.
You can also read the screen width directly out of MediaQuery.of(context).size and create a sized box based on that

MediaQuery.of(context).size.width * 0.65

if you really want to size as a fraction of the screen regardless of what the layout is.

Why is my second div hiding behind the opening div?

I cut your code down and removed all unecessary CSS lines.
I simply added body { margin: 0; } to reset the default body margin.
Then I just added front-page { height: 100vh; } to let it cover the entire viewports height.

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

header {
  font-family: "Architects Daughter", cursive;
  text-align: center;
}

.arrow {
  font-size: 2em;
  visibility: hidden;
}

.front-page {
  background-color: lightseagreen;
  height: 100vh;
}

.social-bar a {
  padding: 0 5px;
}

@media only screen and (min-width: 701px) {
  .arrow {
    visibility: visible;
  }
}

<!-- Head -->
<script src="https://kit.fontawesome.com/bfd52c390d.js" crossorigin="anonymous"></script>

<!-- Body -->
<div class="front-page">
  <div class="intro">
    <header>
      <h1>Guinevere <br> E. <br> Mayberry</h1>
      <h4>Front-End Web Development — Largo, Florida</h4>
    </header>

    <!-- Load external JavaScript -->
    <script src="scripts.js"></script>

    <div class="social-bar">
      <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
      <a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
      <a href="#" class="pillowfort"><i class="fas fa-blog"></i></a>
    </div>
    <i class="fas fa-arrow-alt-circle-down"></i>
  </div>
</div>

<div class="scrolling">
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
  <p>text to allow scrolling</p>
</div>

How to z-index to make a menu always on top of the content

You most probably don't need z-index to do that. You can use relative and absolute positioning.

I advise you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)

Edit: Just to be clear, positioning is not a replacement for them and I do use z-index. I just try to avoid using them. Using z-indexes everywhere seems easy and fun at first... until you have bugs related to them and find yourself having to revisit and manage z-indexes.

---

Related Topics