Task 1

Place two small fixed positioned blocks in this page. Fix one to the left side of the browser's viewport near the top and one to the right of the viewport near the bottom. Make both blocks smallish with fixed dimensions (100x100 or whatever), give them background colors so they stand out clearly in the page, and put a brief explanation inside each one so I can tell at a glance which blocks they are.

Task 2

Place a small absolutely positioned block on the right side of this page, about 300px down from the top. But only about 1/2 of the block is actually visible on the page, the other half being outside the browser's viewport. Make the block smallish with fixed dimensions (100x100 or whatever), give it a background color so it stands out clearly in the page, and put a brief explanation inside it.

The parent and child blocks below are for Question 1.

Question 1

Resize the browser window horizontally (drag the lower right corner left and right) and observe that the above parent block moves back and forth since it is centered in the viewpoort. Even though the child block is inside the parent, and positioned absolutely, it doesn't move with the parent. Explain why.

The child block does not move with the parent, because of the Non-Static Ancestor Principle. In this case, the parent block is static (default position), so the child's position is calculated from the HTML body element (no other non-static ancestors) instead of the parent.

Task 3

Below this block, make a second copy of the above example with id values parent2 and child2 so that the child block always stays inside the parent and at the same location, roughly in the middle of the parent block. The child block must still have position:absolute.

 

The Top and Bottom blocks below are for Questions 2 and 3. These blocks also go with Questions 2 and 3.
Question 2

There are two top/bottom block examples above with almost identical styles. Why is the bottom2 block not stacked on top of the top block, but the bottom1 block is? Both bottom blocks have the exact same top/left coordinates set in the CSS.

The Bottom 1 block has its position set to relative, meaning the coordinates of the block's corners move relative to it's "normal" position (below the top box), ignoring everything around it. As a result, content next to it (Top block) is not adjusted to fit properly in the layout.

Question 3

What causes all the extra space you can see below the Bottom 1 block?

When setting the position of an element to relative, the flow layout is not affected. The space in the layout flow is still allocated for the block, even though the block is not using that space.

Task 4

Alter the above example (Top/Bottom Blocks) as follows without changing the HTML code, just the CSS.
a) Tweak the top blocks by moving them both up exactly 10 pixels. That should make the top blocks cover up about half of the sentences above them.
b) Make the Top blocks render behind the sentences above them (so that the text is on top of the top blocks).
c) Make Bottom 1 block stack underneath its Top block.

The Absolute blocks below are for Questions 4, 5, and 6.

Question 4

Absolute1 and Absolute3 have identical styles, except that Absolute3 is 200px more to the right. Absolute2 and Absolute4 have exactly identical styles. Explain whey Absolute2 and Absolute4 are positioned differently. Explain precicely.

Due to the Non-Static Ancestor Principle, absolute positioning is determined by the position of the element's first non-static ancestor. Since Absolute 3 is a direct non-static ancestor of Absolute 4, the position of the latter is calculated from the position of the former. The position of the top left corner of Absolute 4 is 100px down and to the right from the top left corner of the Absolute 3. On the other hand, the direct non-static ancestor of Absolute 2 is the absolute wrapper, so it moves 100px down and to the right calculated from that element.

Question 5

What happens if the styles for the absolute_wrapper are removed (just remove the id value)? Same thing happens if you completely remove the absolute_wrapper block itself. Explain precicely.

If the absolute wrapper is removed, the first non-static ancestor becomes the HTML body. As a result, the position of the blocks is calculated from the HTML body, moving all the blocks to the top of the page.

Question 6

Absolute2 is on top of Absolute 1. What is determining that stacking order?

The stacking order is determined by the order of the document: the last element in the source code is the one on top.

The parent and child blocks below are for Question 7.

Question 7

The child A block above has z-index of 100 and child B has z-index of 50. So it seems that child A should be stacked on top of child B. Why is it not?

If parents have a stacking context, the children inherit the stacking order of the parent regardless of the stacking context of the child.