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

Put your answer here.

Question 3

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

Put your answer here.

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.

Put your answer here.

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.

Put your answer here.

Question 6

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 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?

Put your answer here.