Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 绝对定位和固定定位的区别
Blogger Information
Blog 29
fans 1
comment 0
visits 14918
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
绝对定位和固定定位的区别
Pharaoh
Original
454 people have browsed it

定位基础

  • 基础术语
    • 定位元素：使用了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. }

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