details-absolute-children-ref.html (814B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <style> 7 div#details { 8 background-color: orange; 9 width: 500px; 10 height: 200px; 11 } 12 div#summary { 13 background-color: green; 14 width: 50%; 15 } 16 div#in_summary { 17 position: absolute; 18 background-color: green; 19 top: 60px; 20 left: 100px; 21 width: 150px; 22 height: 100px; 23 } 24 div#before_summary { 25 position: absolute; 26 background-color: cyan; 27 top: 50px; 28 left: 50px; 29 width: 150px; 30 height: 100px; 31 z-index: 1; 32 } 33 </style> 34 <body> 35 <div id="details"> 36 <div id="before_summary">div before summary</div> 37 <div id="summary">Summary<div id="in_summary">div in summary</div></div> 38 </div> 39 </body> 40 </html>