|
|
@@ -0,0 +1,58 @@
|
|
|
+<!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>
|
|
|
+ .box{
|
|
|
+ width: 300px;
|
|
|
+ height: 30000px;
|
|
|
+ border:3px solid blue;
|
|
|
+ /* background-color: #ccc; */
|
|
|
+ /* 如果只是relative定位 在没有加任何位移方向的时候那么对于当前元素没有任何影响 ，一般情况下让子元素相对父元素进行定位就添加relative定位即可 */
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: red;
|
|
|
+ /* margin-top: 100px;
|
|
|
+ margin-left: 100px; */
|
|
|
+ /* positon 定位 */
|
|
|
+ /* 相对定位 relative 相对于自己的位置进行定位 */
|
|
|
+ /* 定位元素会出现层级覆盖的情况 */
|
|
|
+ /* position: relative; */
|
|
|
+ /* 定位需要配合 top left bottom right */
|
|
|
+ /* top:100px;
|
|
|
+ left:100px; */
|
|
|
+
|
|
|
+ /* 绝对定位 absolute 相对于最近的有定位的父元素进行定位 如果父元素没有定位那么继续向上查找 直到找到body元素 */
|
|
|
+ /* 绝对定位的元素会脱离文档流 所以不会占用文档流的位置 */
|
|
|
+ /* 绝对定位无法恢复到文档流的位置 */
|
|
|
+ /* 当想把一个元素放到另一个元素的指定位置时 可以使用绝对定位 */
|
|
|
+ /* position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0; */
|
|
|
+
|
|
|
+ /* 固定定位 fixed 相对于浏览器窗口进行定位 */
|
|
|
+ /* 固定定位的元素会脱离文档流 所以不会占用文档流的位置 */
|
|
|
+ /* 一般用作与返回顶部的按钮 */
|
|
|
+ position: fixed;
|
|
|
+ bottom: 100px;
|
|
|
+ right: 100px;
|
|
|
+ }
|
|
|
+ .span1{
|
|
|
+ position:relative;
|
|
|
+ top:20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+ <div class="item"></div>
|
|
|
+ <span class="span1">hello</span>
|
|
|
+ <span class="span2">world</span>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
