Positioning Worksheet Answers ----------------------------------------------- ----------------------------------------------- Task 1: To keep it near the top left set its top/left coordinates to small numbers. To keep it near the bottom right, set its bottom/right coordinates to small pixel values or %. ----------------------------------------------- Task 2: The easiest way to do this is to set its coordinates to something like top:300px and right:-50px. If the block is 100px wide, the negative right value should put it about half way outside the viewport. ----------------------------------------------- Question 1: Because the parent is positioned statically (the default for blocks) which means the child's first non-static ancestor is the page wrapper (same as browser viewport in this example). Thus, the child's absolute position is calculated from the upper left corner of page wrapper, completely independently of where the parent block is. ----------------------------------------------- Task 3: Putting position:relative; on the parent will cause the child's absolute positioning to be calculated from the upper left corner of the parent rather than the browser viewport, thereby keeping the child inside the parent. Choose top/left coordinates to put the child roughly in the middle of the parent. ----------------------------------------------- Question 2: The bottom2 block is positioned statically, and therefore can't be tweaked by changing top/left. But the bottom1 block is positioned relatively, so setting its top/left coordinates moves its position relative to where it would have been in the page layout flow. ----------------------------------------------- Question 3: The bottom2 block is relatively positioned. Therefore, even though it is moved upward by setting top/left coordinates, the space it would have occupied in the page layout flow is preserved. The extra space is simply where it would have been had it not been moved. ----------------------------------------------- Task 4: a) Moving the top blocks up about 10px would put them partially on top of the text since positioned elements are always on top of static content. b) Give the top blocks a negative z-index. That puts behind the text (static content). c) To stack it underneath, give Bottom 1 a z-index even more negative (perhaps -2) than the Top block. ----------------------------------------------- Question 4: Absolute2 is not a child of Absolute1, so its positioning is calculated from the absolute wrapper (its first non-static ancestor). But Absolute4 is a child of Absolute3, which is non-static, so Absolute4 positioning is calculated from Absolute3. ----------------------------------------------- Question 5: If the wrapper becomes statically positioned (the default if no styles are applied to it), then its children's absolute position will be calculated from the entire page wrapper. ----------------------------------------------- Question 6: When positioned blocks have no z-index set, the stacking order is determined by the "document order" of the HTML tags. ----------------------------------------------- Question 7: Parent B has a higher z-index than Parent A, so Parent B has a higher "stacking context." Thus, a child of Parent B could never be stacked below a child of Parent A since children are confined by the stacking contexts of their parents, regardless of their own z-indices. This is indeed one of the most subtle points of absolute positioning.