Absolute Position Affects Width

Width of div with position:absolute content

An absolute positioned div is taken out of the normal flow and as such doesn't effect, in this case, its parent height. The parent will display as there were no content (0px high).

In your case, you need to give your parent (container) a height big enough for the absolute position content to fit or fill it with normal flowed content, and have the inner div positioned at left and bottom like this.

.container {

  position:relative;

  min-height: 50px;

  background: gray;

  padding-left: 40px;

}

.innerContainer {

  position:absolute;

  left: 0;

  top: 0;

  width: 30px; 

  height: 10px;

  background: darkgray;

}

.innerContainer:nth-child(2) {

  top: auto;

  bottom: 0;

  background: lightgray;

}

<div class="container">

  <div class="innerContainer"></div>

  <div class="innerContainer"></div>

</div>

<br>

<div class="container">

  <div class="innerContainer"></div>

  <div class="innerContainer"></div>

  This has text that sizes itself<br>

  This has text that sizes itself<br>

  This has text that sizes itself<br>

</div>

Is there any way for position:absolute div to retain relative width?

Add position:relative to your outer div.

update: It works because positions in position: absolute are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.

Avoid that an absolute positioned element push the boundaries of the page width

Use this 'meta' tag in your :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

and then your will look more or less like this :

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
    <title>Menu Page</title>

    <link rel="stylesheet" href="css/style.css">
 </head>

Do fixed and absolutely positioned elements not take the full width of their container like block elements? If yes then why?

This question could have different possible answers depending on what kind of block behavior you're expecting or referring to.

As per your comment above, the following answer refers to the width behaviour of such element.

Normally, block-level elements per default take up the full available width of their container element. However, when you set position: fixed or absolute the element isn't displayed in the same sense as with the rest of the elements.

As per MDN:

A block-level element occupies the entire space of its parent element (container), thereby creating a "block."

As such, the meaning of the container for a block-level element makes alters when refering to absolute or fixed positioned elements. It makes more sense to rather call it the parent.

Since there is no container element to inherit its width, you're seeing it behave more like an inline-block-type element.

Here's what the W3C says for calculating the width of an absolutely positioned, non-replaced element:

The constraint that determines the used values for these elements is:
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = width of containing block.
If all three of left, width, and right are auto: First set any auto values for margin-left and margin-right to 0. Then, if the direction property of the element establishing the static-position containing block is ltr set left to the static position and apply rule number three below;

This is true. You have not defined any values for width, left nor right nor do they inherit such values. As such they take the default auto. The direction property is indeed ltr as well, so we continue on to rule number three as suggested, which says:

width and right are auto and left is not auto, then the width is shrink-to-fit . Then solve for right.

The shrink-to-fit width rule applies, and goes as follows:

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for width after setting left (in case 1) or right (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

question about width of an absolute positioned element

The "parent-child relationship" doesn't really change (so technically it'll still be a child thereof, which you can see reflected in the DOM), but the "(document) flow" does indeed change.

Once you use position: absolute; the element is removed from the normal document flow, which does affect the effect many properties have (as you've likely noticed).

Since you mentioned being new to CSS, i should make sure you're aware that 90%
of the time, when online tutorials (or books) suggest using properties such as position and float, they are likely to be leading you down an outdated and/or misguided path.

Nowadays we have things like flexbox (display: flex) and grid (display: grid) which make the vast majority of layout challenges (which used to be a pain to understand/create) totally simple.

How to keep width when setting position absolute

.cardlist li .rules doesn't have a width. It will have a max-width of parent, with width: auto.

You could give it a width: width: 100% (px: width: 123px) or stretch it with left: 0; right: 0;.

CSS position absolute and full width problem

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header