23_定位.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 400px;
  10. height: 400px;
  11. border:3px solid black;
  12. position: relative;
  13. }
  14. .box2{
  15. width: 100px;
  16. height: 100px;
  17. background-color:red;
  18. /* float: right; */
  19. /* relative 相较于自己进行定位 */
  20. /* position: relative;
  21. top:20px;
  22. left: 20px; */
  23. /* absolut 相较于最近已经定位的父元素 */
  24. /* position: absolute;
  25. right: 0;
  26. bottom: 0; */
  27. position: absolute;
  28. left: 0;
  29. top: 0;
  30. /* fixd 固定定位 相较于浏览器窗口 */
  31. /* position: fixed;
  32. right: 0;
  33. bottom: 0; */
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="box">
  39. <div class="box2"></div>
  40. <span>hello</span>
  41. </div>
  42. </body>
  43. </html>