TestFlow_Stacking.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <title>Stacking</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. body {
  9. margin: 0;
  10. }
  11. div {
  12. border: 2px solid blue;
  13. padding: 5px;
  14. margin: 3px;
  15. }
  16. span {
  17. border: 2px solid red;
  18. }
  19. </style
  20. </head>
  21. <body>
  22. <script>
  23. function Show(){
  24. var El = document.getElementById('Div2');
  25. console.log('Client: l='+El.clientLeft+' t='+El.clientTop+' w='+El.clientWidth+' h='+El.clientHeight+' Scroll: Left='+El.scrollLeft+' Width='+El.scrollWidth+' Top='+El.scrollTop+' Height='+El.scrollHeight);
  26. }
  27. </script>
  28. <div id="Div1">
  29. <div id="Div12" style="width: 200px; height: 150px;">
  30. <span style="width: 10px; height: 20px;">Span1</span>
  31. <span style="width: 10px; height: 20px; background: green; position: relative; left: 30px;">Span2<span>Span21Í</span><span style="display: inline-block; width: 10px; height: 10px;"></span></span>
  32. <span style="width: 10px; height: 20px;">Span3</span>
  33. </div>
  34. </div>
  35. <div id="Div2">
  36. </div>
  37. </html>