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 doesn't move because it is positioned absolutely from the body element. The body element acts as its non static ancestor and so the top left corner of the block is positioned according to the top left corner of the body element.

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 move upward, but the bottom1 block is? Both bottom blocks have the exact same top/left coordinates set in the CSS.

The reason why the bottom1 block moves forward is because it has it's position set to relative. This means that the block is placed where it should be.

Question 3

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

The relative position style always preserves the space where the block once was if it were static.

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 why Absolute2 and Absolute4 are positioned differently. Explain precicely.

Absolute4 is positioned differently from Absolute2 because it is a child block of Absolute3. This makes Absolute3 the non static ancestor of Absolute4 and thus it will position according to the top left corner of that parent block. Absolute2 is within the wrapper that is relative so it positions according to that.

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.

The wrapper is positioned relatively so that makes it the non static ancestor of the Absolute1, Absolute2, and Absolute3 (since Absolute4 is a child of Absolute3 it goes along with it). When removed the blocks move to be positioned according to the top left corner of the body element.

Question 6

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

When positioned elements are stacked, they refer to document order (if a z-index is not determined) to determine which one goes on top. Since Absolute2 comes after Absolute1, it is 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?

Child A block is the child block of Parent A block and Parent A block has a lower z-index than Parent B block. The child blocks are placed at the same level as their parent blocks. It is not that they inherit the actual z-index they just adhere to the same stack level regardless of it's actual z-index.

---