Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 网站定位元素的使用场景与演示
Blogger Information
Blog 14
fans 2
comment 2
visits 6709
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网站定位元素的使用场景与演示
西门瑶雪
Original
384 people have browsed it

网站定位元素的使用场景与演示

定位元素的相互作用

1、定位三个术语：定位元素，最初包含块（定位上下文），参照物
2、固定定位永远相对于视口定位-适用于滚动式永远不变，如回到顶部按钮，在线客服悬浮按钮；
3、绝对定位一直向上找父级-定位父级（定位上下文），不在文档流中；
4、相对定位：自身，在文档流中；
5、粘性定位：sticky，可指定内容滚动悬浮显示

效果图展示

效果图展示

css样式演示

  1. <style>
  2. .box {
  3.     border: 1px solid #333;}
  4. .box.dd {width:400px;
  5. height:400px;
  6. background-color: rgb(181, 181, 207);
  8. }
  9. .box.de{height:100px;}
  10. /*默认起始坐标为0，0；top，left，right，bottom；默认0不需要加单位*/
  11. .box.de.da1{background-color: blueviolet;
  12. position: relative;
  13. top: 40px;
  14. left: 20px;
  15. z-index: 1;
  16. }
  17. .box.de.da2{background-color: rgb(24, 136, 180);
  18. position: absolute;
  19. right: 0;
  20. bottom: 0;}
  21. .box.de.da3{background-color: rgb(199, 170, 39);
  22. position:fixed;
  23. right: 100px;
  24. bottom: 50px;
  25. }
  26. body{height: 20000px;
  27.     border: 5px solid blue;
  28. height: 500px;}
  30. .box.de.da4{background-color: rgb(226, 120, 21);
  31. position:fixed;
  32. right: 100px;
  33. bottom: 250px;
  34. }
  35. </style>

html代码展示

  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>Document</title>
  8. </head>
  9. <body>
  10.     <!--
  11. 1、定位三个术语：定位元素，最初包含块（定位上下文），参照物
  12. 2、固定定位永远相对于视口定位-适用于滚动式永远不变；
  13. 3、绝对定位一直向上找父级-定位父级（定位上下文），不在文档流中；
  14. 4、相对定位：自身，在文档流中；
  15.     -->
  16. <div class="box dd">
  17.     <div class="box de da1">云逸网-相对定位1</div>
  18.     <div class="box de da2">云逸网-绝对定位2</div>
  19.     <div class="box de da3">云逸网-固定定位3</div>
  20.     <div class="box de da4">云逸网-固定定位4<br>云逸网-固定定位4</div>
  21.     <div class="box de da4">云逸网-固定定位4</div>
  22.     <div class="box de da4">云逸网-固定定位4</div>
  23.     <div class="box de da4">云逸网-固定定位4</div>
  24.     <div class="box de da4">云逸网-固定定位4</div>
  25. </div>
  26. <style>
  27. .box {
  28.     border: 1px solid #333;}
  29. .box.dd {width:400px;
  30. height:400px;
  31. background-color: rgb(181, 181, 207);
  33. }
  34. .box.de{height:100px;}
  35. /*默认起始坐标为0，0；top，left，right，bottom；默认0不需要加单位*/
  36. .box.de.da1{background-color: blueviolet;
  37. position: relative;
  38. top: 40px;
  39. left: 20px;
  40. z-index: 1;
  41. }
  42. .box.de.da2{background-color: rgb(24, 136, 180);
  43. position: absolute;
  44. right: 0;
  45. bottom: 0;}
  46. .box.de.da3{background-color: rgb(199, 170, 39);
  47. position:fixed;
  48. right: 100px;
  49. bottom: 50px;
  50. }
  51. body{height: 20000px;
  52.     border: 5px solid blue;
  53. height: 500px;}
  55. .box.de.da4{background-color: rgb(226, 120, 21);
  56. position:fixed;
  57. right: 100px;
  58. bottom: 250px;
  59. }
  62. </style>
  64. </body>
  65. </html>
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