[css-images-4] Make the element() examples use stacking contexts, as the issue says.

Author: tabatkins

css-images-4/Overview.bs

@@ -208,7 +208,7 @@ Using Elements as Images: the ''element()'' notation</h3>
 
 				<pre>
 					&lt;style>
-					#src { color: white; background: lime; width: 300px; height: 40px; }
+					#src { color: white; background: lime; width: 300px; height: 40px; position: relative; }
 					#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
 					&lt;/style>
 					&lt;p id='src'>I'm an ordinary element!&lt;/p>
@@ -279,9 +279,9 @@ Using Elements as Images: the ''element()'' notation</h3>
 
 				<pre>
 					&lt;!DOCTYPE html>
-					&lt;p id='one' style="display:none;">one&lt;/p>
+					&lt;p id='one' style="display:none; position: relative;">one&lt;/p>
 					&lt;iframe src="http://example.com">
-						&lt;p id='two'>I'm fallback content!&lt;/p>
+						&lt;p id='two' style="position: relative;">I'm fallback content!&lt;/p>
 					&lt;/iframe>
 					&lt;ul>
 						&lt;li style="background: element(#one);">
@@ -326,6 +326,10 @@ Using Elements as Images: the ''element()'' notation</h3>
 			}
 			&lt;/script>
 			&lt;style>
+			.slide {
+				/* Need to be a stacking context to be element()-able. */
+				position: relative;
+			}
 			#prev-preview, #next-preview {
 				position: fixed;
 				...