欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

定位与定位元素

程序员文章站 2022-05-01 21:51:43
...

定位与定位元素

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>定位与定位元素</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <!-- 文档流：显示顺序和书写顺序一致 -->
    13. 

  13.     <!-- position:static -->
    14. 

  14.     <div class="box parent">
    15. 

  15.         <div class="box child first"></div>
    16. 

  16.         <div class="box child"></div>
    17. 

  17.     </div>
    18. 

  18. </body>
    19. 

    20. 

  20. </html>
    21. 

    22. 

  22. <style>
    23. 

  23.     body {
    24. 

  24.         border: 1p solid #000;
    25. 

  25.     }
    26. 

    27. 

  27.     .box {
    28. 

  28.         border: 1px solid #000;
    29. 

  29.         width: 300px;
    30. 

  30.         height: 400px;
    31. 

  31.     }
    32. 

    33. 

  33.     .box.parent {
    34. 

  34.         /* 设置定位参考父级/包含块 */
    35. 

  35.         position: relative;
    36. 

  36.     }
    37. 

    38. 

  38.     .box.child.first {
    39. 

  39.         background-color: lightgreen;
    40. 

  40.         /*1. 相对定位 */
    41. 

  41.         position: relative;
    42. 

  42.         top: 30px;
    43. 

  43.         left: 30px;
    44. 

  44.         /* 2.绝对定位 */
    45. 

  45.         position: absolute;
    46. 

  46.         /* position: fixed; */
    47. 

  47.         /* 相对定位：相对自身，在文档流中，绝对定位：相对包含块不在文档流中 */
    48. 

  48.         /* 绝对定位，不再相对于自身，而是相对于它的包含块 */
    49. 

  49.         /* 它有两个包含块（父级），.parent body,而能充当绝对定位包含块的元素，必须是“定位元素 */
    50. 

  50.         /* 如果决定定位元素，一直向上，找不到可定位的父级元素，就相对body */
    51. 

  51.     }
    52. 

    53. 

  53.     .box.child {
    54. 

  54.         width: 150px;
    55. 

  55.         height: 150px;
    56. 

  56.         background-color: yellow;
    57. 

  57.     }
    58. 

  58. </style>
    59.

上一篇： UEFI + GPT双硬盘安装win10和Ubuntu16.04双系统

下一篇： navicat can't connect to MySQL server on 10038

推荐阅读