position.html 901 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <div class="test-box" style="height: 200px; width: 200px">
  2. <div class="test-box" style="height: 400px; width: 400px">
  3. <div class="test-box" style="height: 800px; width: 800px">
  4. <div class="target"></div>
  5. <div class="source source-se"></div>
  6. </div>
  7. <div class="source source-sw"></div>
  8. </div>
  9. <div class="source source-ne"></div>
  10. </div>
  11. <div class="source source-nw"></div>
  12. <style>
  13. body {
  14. padding-top: 2000px;
  15. }
  16. .test-box {
  17. padding: 15px;
  18. border: 25px solid #000;
  19. overflow: scroll;
  20. position: relative;
  21. }
  22. .source {
  23. width: 40px;
  24. height: 40px;
  25. background: red;
  26. position: absolute;
  27. }
  28. .source-nw {
  29. background: cyan;
  30. }
  31. .source-ne {
  32. background: magenta;
  33. }
  34. .source-sw {
  35. background: yellow;
  36. }
  37. .source-se {
  38. background: black;
  39. }
  40. .target {
  41. width: 80px;
  42. height: 80px;
  43. background: blue;
  44. position: absolute;
  45. bottom: 0;
  46. right: 0;
  47. }
  48. </style>