|
|
@@ -0,0 +1,34 @@
|
|
|
+<!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>
|
e
