|
|
@@ -0,0 +1,87 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 400px;
|
|
|
+ height: auto;
|
|
|
+ border: 1px solid #000;
|
|
|
+ margin-top: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ /* position: relative;
|
|
|
+ top: 100px;
|
|
|
+ left: 200px; */
|
|
|
+ background: #f0f;
|
|
|
+ /* position: sticky;
|
|
|
+ top: 40px; */
|
|
|
+ }
|
|
|
+ .three {
|
|
|
+ background: #0ff;
|
|
|
+ /* position: fixed; */
|
|
|
+ /* position: static; */
|
|
|
+ /* top: 100px; */
|
|
|
+ /* left: 100px; */
|
|
|
+ }
|
|
|
+ .four {
|
|
|
+ background: #f00;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
+ .five {
|
|
|
+ background: #ff0;
|
|
|
+ }
|
|
|
+ .six {
|
|
|
+ background: hotpink;
|
|
|
+ }
|
|
|
+ .seven {
|
|
|
+ background: purple;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 一个网页的组成：
|
|
|
+ 标准流（文档流）
|
|
|
+ 浮动
|
|
|
+ 定位
|
|
|
+ 定位
|
|
|
+ position:
|
|
|
+ 1.sticky 粘性定位 常用于吸顶效果 配合top使用 脱离文档流不占位
|
|
|
+ 2.fixed 固定定位 脱离文档流不占位 相对于祖先元素定位
|
|
|
+ 3.relative 相对定位 不脱离文档流占位 相对于自己本身定位
|
|
|
+ 4.absolute 绝对定位
|
|
|
+ a.父级盒子未定位 相对于祖先元素进行定位 脱离文档流 不占位
|
|
|
+ b.父级盒子定位（相对定位） 脱离文档流 不占位 相对于父级盒子
|
|
|
+ top bottom left right
|
|
|
+ 5.static 静态定位 不对页面产生影响
|
|
|
+ -->
|
|
|
+ <div class="main">
|
|
|
+ <div class="one"></div>
|
|
|
+ <div class="two"></div>
|
|
|
+ <div class="three"></div>
|
|
|
+ <div class="four"></div>
|
|
|
+ <div class="five"></div>
|
|
|
+ <div class="six"></div>
|
|
|
+ <div class="seven"></div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
e