search

博客列表 >网站定位元素的使用场景与演示

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

西门瑶雪
西门瑶雪原创
2022年07月11日 22:38:42381浏览

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

定位元素的相互作用

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>
上一条：绝对定位与固定定位写法和区别下一条：icon图标引入和css自适应终端
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多