Position: Absolute Without Setting Top/Left/Bottom/Right

position: absolute without setting top/left/bottom/right?

The standard generally says if top/bottom, left/right are auto, then default them to their position: static values:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

Position:absolute without top/left/bottom/right values

If you want an element to remain in its static position (where it would normally be if it were not positioned) but simply take it out of normal flow, simply specifying position: absolute is perfectly acceptable. The behavior is as described in sections 10.3.7 and 10.6.4 of the spec, and every browser behaves correctly.

You aren't required to give it any offsets if you don't want to move the element from its usual static position, and you aren't required to relatively position its parent element if you're not going to move the element anywhere since it'll remain in its static position anyway.

I just looked at your code again and noticed that you're applying percentage padding to your absposed element. You will need to relatively position the parent element if you want the percentage padding to be calculated based on the width of this parent element and not the initial containing block (where the root element resides):

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}

Compare this fiddle with the original.

So, the main purpose of relatively positioning some ancestor of an absolutely-positioned element is for designating its containing block. Sections 9 and 10 have most of the gory details on the interactions between elements and their containing blocks. Depending on your layout you may not need to position anything else at all, however if your layout is complex enough you may find that there are side-effects resulting from whether or not you position any container elements, and which one you do position. I suspect the topic of containing blocks could be covered in a different question since it may very well be out of scope of this one.

Is position:absolute without top or bottom a good CSS practice?

CSS does not have to be semantic. Semantic HTML means that the tags, identifiers and classes have meaning.

CSS is purely representational and does not have to have meaning.

And absolute positioning without defining top and bottom is perfectly OK (it just defaults to auto)

Why does this CSS margin-top style not work?

You're actually seeing the top margin of the #inner element collapse into the top edge of the #outer element, leaving only the #outer margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.

Here are the relevant points from the W3C spec:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse [...]

Two margins are adjoining if and only if:

• both belong to in-flow block-level boxes that participate in the same block formatting context
• no line boxes, no clearance, no padding and no border separate them
• both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
  
  
  • top margin of a box and top margin of its first in-flow child

You can do any of the following to prevent the margin from collapsing:

• Float either of your div elements
• Make either of your div elements inline blocks
• Set overflow of #outer to auto (or any value other than visible)

The reason the above options prevent the margin from collapsing is because:

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
• Margins of inline-block boxes do not collapse (not even with their in-flow children).

The left and right margins behave as you expect because:

Horizontal margins never collapse.

How to align div to bottom right without using absolute position?

With Flexbox you can align both at the bottom and keep the inner div right aligned.

Add display: flex; align-items: flex-end to the outer div, reset the margin on the h1 (or you can add one to the other inner div) and then set margin-left: auto; to the inner div

The align-items: flex-end will keep the inner div bottom aligned with the h1 and the margin-left: auto; will push the inner div to the right.

Note, because of the different font size, their inner metrics will create a somewhat bigger white space below the h1. Here I simply added a 4px bottom padding on the inner div, but you can also play with the overall line-height

Updated based on a comment

If to keep the text unwrapped until they hit their parents width, add flex-wrap: wrap; to outer div

<div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my title    </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>
<br><div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my big title - Bla bla bla       </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>
<br><div style="border-bottom: 1px solid; padding-bottom:10px; display: flex; flex-wrap: wrap; align-items: flex-end;">
    <h1 style="margin: 0;">      This is my big title - Bla bla bla bla bla bla bla bla bla    </h1>        <div style="            margin-left: auto;            font-size: small;            padding: 0 0 4px 20px;            font-style: italic;">     Published on Friday 11th August 2017 at 12:46      </div>  </div>

top:0;
left:0;
height:100%;
width:100%;

input,div {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  text-align: center;  line-height: 2.2em;  margin: auto;}
div {  background: lime;/* show me */}
input {  z-index: 1;/* let me be on top */}

<input type="text" value="i have a defaut size" /><div> well i have size that content, coordonates or height/width ,  shall give me </div>

#wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  transform: translate(-100%, -100%); /* this */
  background: green;
}

<div id='wrapper'>
  <div id='position-me'>
    Text is here
  </div>
</div>