details-absolute-children.html (906B)
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 details { 8 background-color: orange; 9 width: 500px; 10 height: 200px; 11 } 12 summary { 13 /* Hide the triangle for comparing with div in reftest. */ 14 list-style-type: none; 15 background-color: green; 16 width: 50%; 17 } 18 div#in_summary { 19 position: absolute; 20 background-color: green; 21 top: 60px; 22 left: 100px; 23 width: 150px; 24 height: 100px; 25 } 26 div#before_summary { 27 position: absolute; 28 background-color: cyan; 29 top: 50px; 30 left: 50px; 31 width: 150px; 32 height: 100px; 33 } 34 </style> 35 <body> 36 <details open> 37 <div id="before_summary">div before summary</div> <!-- This div is at front. --> 38 <summary>Summary<div id="in_summary">div in summary</div></summary> 39 </details> 40 </body> 41 </html>