lovecoding
/
W260426


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!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>