| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <link rel="stylesheet" href="./定位.css">
- </head>
- <body>
- <!--
- 一个完整的网页：
- 文档流（标准流）
- 浮动
- 定位
- 定位：
- position:
- 1.fixed
- 相对于浏览器的视口定位
- 固定定位 脱离文档流 不占位
- 2.sticky
- 粘性定位 搭配top一起使用 一般用于吸顶效果
- 3.static
- 静态定位 页面存在即存在 不对页面造成影响
- 4.relative
- 相对定位 不脱离文档流占位 相对于自己本身
- 5.absolute
- 绝对定位:
- a.父级元素没有任何定位的时候 相对于祖先元素定位 脱离文档流不占位
- b.父级存在定位：相对定位；子绝父相 子级相对于父级定位 脱离文档流不占位
- 控制层级：z-index
- 搭配：top bottom right left
- -->
- <div id="box">
- <div class="box1">1</div>
- <div class="box2">2</div>
- <div class="box3">3</div>
- <div class="box4">4</div>
- <div class="box5">5</div>
- <div class="box6">6</div>
- <div class="box7">7</div>
- <div class="box8">8</div>
- <div class="box9">9</div>
- </div>
- </body>
- </html>
|
