search

博客列表 >绝对定位和固定定位的区别

绝对定位和固定定位的区别

Pharaoh
Pharaoh原创
2022年07月11日 23:27:59456浏览

定位基础

  • 基础术语
    • 定位元素：使用了position: relative / absolute / fixed的元素
    • 最初包含块：html标签的父级，是看不见的，大多数情况下与浏览器视口表现一致，但不相同
    • 参照物：元素自身，祖先定位元素，最初包含块
  • 定位类型
    • 相对定位：relative
    • 绝对定位：absolute
    • 固定定位：fixed
    • 静态定位：static（默认）
    • 粘性定位：sticky
  • 各种定位参照物
    • 相对定位：参照自身在文档流中的位置来定位
    • 绝对定位：参照定位父级元素，如果没有就会找到最初包含块来定位
    • 固定定位：参照最初包含块来定位
    • 粘性定位：参照浏览器视口

绝对定位和固定定位的相同点

  • 都脱离了文档流

绝对定位和固定定位的不同点

  • 绝对定位参照父级，如果父级不是定位元素会一直向上找，如果没找到，就会找到最初含块
  • 固定定位参照的最初包含块浏览器视口
  • 固定定位会固定在浏览器的某个位置

实例

绝对定位

以圣杯布局为例
通过外边距的负值和绝对定位修改左右边栏的位置，把内容区挤在中间

  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.     <link rel="stylesheet" href="shengbei.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="main">
  13.         消息：关心海洋、认识海洋、经略海洋！中国经济的腾飞，与海洋密不可分。党的十八大以来，习近平总书记高度重视海洋工作，关心海洋事业发展。在中国航海日之际，央视网系列创意微视频《非凡十年》，邀您一起来看中国航海的奋进之路。
  14.       </div>
  15.       <div class="left">左</div>
  16.       <div class="right">右</div>
  17.     </div>
  18.   </body>
  19. </html>
  20. /* CSS文件 */
  21. .container {
  22.   width: 1000px;
  23.   min-height: 600px;
  24.   overflow: hidden;
  25.   margin: auto;
  26.   padding: 0 200px;
  27.   position:relative;
  28. }
  29. .main,
  30. .left,
  31. .right {
  32.   float: left;
  33.   min-height: 600px;
  34. }
  35. .main {
  36.   width: 100%;
  37.   background-color: coral;
  38. }
  39. .left {
  40.   width: 200px;
  41.   margin-left: -100%;
  42.   background-color: yellow;
  43.   position: absolute;
  44.   left: -200px;
  45. }
  46. .right {
  47.   width: 200px;
  48.   margin-left: -200px;
  49.   background-color: yellow;
  50.   position: absolute;
  51.   right: -200px;
  52. }

固定定位

把二维码放在网页的右侧

  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.     <link rel="stylesheet" href="shengbei.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <div class="main">
  13.         消息：关心海洋、认识海洋、经略海洋！中国经济的腾飞，与海洋密不可分。党的十八大以来，习近平总书记高度重视海洋工作，关心海洋事业发展。在中国航海日之际，央视网系列创意微视频《非凡十年》，邀您一起来看中国航海的奋进之路。
  14.       </div>
  15.       <div class="left">左</div>
  16.       <div class="right">右</div>
  17.     </div>
  19.     <div class="qr"><img src="dy.png" alt="douyin" /></div>
  20.   </body>
  21. </html>
  23. /* CSS文件 */
  25. .container {
  26.   width: 600px;
  27.   min-height: 600px;
  28.   overflow: hidden;
  29.   margin: auto;
  30.   padding: 0 200px;
  31. }
  33. .main,
  34. .left,
  35. .right {
  36.   float: left;
  37.   min-height: 600px;
  38. }
  40. .main {
  41.   width: 100%;
  42.   background-color: coral;
  43. }
  44. .left {
  45.   width: 200px;
  46.   margin-left: -100%;
  47.   background-color: yellow;
  48.   position: relative;
  49.   left: -200px;
  50. }
  51. .right {
  52.   width: 200px;
  53.   margin-left: -200px;
  54.   background-color: yellow;
  55.   position: relative;
  56.   right: -200px;
  57. }
  59. .qr img {
  60.   width: 100px;
  61. }
  63. .qr {
  64.   position: fixed;
  65.   right: 0;
  66.   top: 400px;
  67. }

上一条：默认布局与定位布局下一条：表格字体样式和响应式布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多