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.

Put your answer here.

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 Question 2.

These blocks also go with Question 2.
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.

Put your answer here.

Task 4

Alter the above example as follows without changing the HTML code, just the CSS. Tweak the top blocks by moving them up exactly 10 pixels. That should make the top blocks cover up about half of the sentences above the top blocks. Then, make the top blocks appear underneath that text, so that the sentences appear about half on top of the top blocks. Finally, make the bottom1 block stack underneath the top block.

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

Question 3

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.

Put your answer here.

Question 4

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.

Put your answer here.

Question 5

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

Put your answer here.

The parent and child blocks below are for Question 6.

Question 7

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

Put your answer here.