The parent and child blocks below are for Question 1.
Parent block
Child Block
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.
Parent block 2
Child Block 2
The Top and Bottom blocks below are for Questions 2 and 3.
Top block
Bottom 1 block
These blocks also go with Questions 2 and 3.
Top block
Bottom 2 block
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.
The Absolute blocks below are for Questions 4, 5, and 6.
Absolute 1
Absolute 2
Absolute 3
Absolute 4
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.
Parent A block
Child A Block
Parent B block
Child B is actually a child of this block, it's just positioned outside of it.
Child B Block
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.