Blogger Information
Blog 62
fans 3
comment 1
visits 29553
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
绝对定位与固定定位写法和区别
kiraseo_wwwkiraercom
Original
471 people have browsed it

绝对定位与固定定位写法和区别

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>绝对定位与固定定位</title>
  8. </head>
  9. <body>
  10. <div class="box">
  11. <div class="chk">我是绝对定位</div>
  12. <div class="chkone">我是固定定位</div>
  13. </div>
  14. <style>
  15. .box{
  16. height: 500px;;
  17. border: 1px solid #000;
  18. position: relative;
  19. }
  20. .chk{
  21. border: 2px solid blue;
  22. height: 50px;
  23. background-color: aqua;
  24. position: absolute;
  25. left: 100px;
  26. }
  27. .chkone{
  28. height: 50px;
  29. background-color: yellowgreen;
  30. border: 1px solid yellow;
  31. position: fixed;
  32. left: 0px;
  33. bottom: 0px;
  34. }
  35. body{
  36. height: 2000px;
  37. }
  38. </style>
  39. 通过演示得出结论, 绝对定位参照物,默认父级是上一级元素(.box)
  40. 固定定位参照我,默认父级为可视窗口位置,无论屏幕如何滚动,依然固定在当前可视窗口位置
  41. </body>
  42. </html>

通过演示得出结论

1. 绝对定位参照物,默认父级是上一级元素(.box)

2. 固定定位参照我,默认父级为可视窗口位置,无论屏幕如何滚动,依然固定在当前可视窗口位置

演示效果

定位效果

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post