| 12345678910111213141516171819202122232425262728293031323334 |
- <!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/index.css">
- </head>
- <body>
- <!--
- 网页页面：标准流 浮动 定位
- 定位：
- position
- 1.fixed 固定定位 相对于祖先元素 不占位脱离了文档流
- 2.sticky 粘性定位 占位不脱离文档流
- 3.static 静态定位
- 4.relative 相对定位 相对于元素本身 占位不脱离文档流
- 5.absolute 绝对定位 不占位脱离文档流
- a.当使用绝对定位时 父级元素中没有使用定位 相对于祖先元素定位
- b.当父级元素使用相对定位 则子元素相对于父级进行定位
- 位置：top bottom left right
- -->
- <div style="margin-top: 100px;border: 1px solid #000;width: 300px;height: 100%;position: relative;">
- <div class="box">1</div>
- <div class="box">2</div>
- <div class="special box">3</div>
- <div class="box">4</div>
- <div class="box">5</div>
- <div class="box">6</div>
- <div class="box">7</div>
- <div class="box">8</div>
- </div>
- </body>
- </html>
|
