lovecoding
/
J250419


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS其他样式</title>
    <!---->
    <style>
        /*
            display属性，设置是否/如何显示元素
            每个HTML元素都有一个默认的display值，
            可能是block 块状元素，比如div h1 p
            可能是inline 行级元素 比如a input ....
        */
        h1 {
            display: inline;
        }

        a {
            display: block;
        }
        p{
            color: #fff;
        }
        p.two {
            display: none; /*隐藏这个元素*/
        }
        /*
            position 定位样式
            用来规定元素定位方法的类型
            规定了应用于HTML元素的定位给方法的类型有5种：
            static  静态 静态定位的元素不会受到top bottom left right属性的影响
            relative 相对定位，会受到top bottom left right属性的影响
            fixed   相对于视口进行定位，即使滚动页面，也始终处在同一位置
            absolute   绝对定位 相对最近的定位祖先元素进行定位，
            sticky  根据用户的滚动位置进行定位 根据滚动位置在相对和固定之间进行切换，
            会先被相对定位，直到视口遇到了给定的偏移位置，然后再粘贴到这个位置。
        */
        div{
            border: solid 1px red;
            background-color: #00f600;
            position: sticky;
            height: 100px;
            left: 50px;
            top:0px;
            z-index:-1; /*设置Z轴方向的位置，元素重叠时哪个元素在前，哪个元素在后*/
        }
        img{
            height: 100px;
        }
        p{
            border-bottom: solid 1px red;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<a href="#" target="_blank">首页</a>
<a href="#" target="_blank">用户管理</a>
<a href="#" target="_blank">部门管理</a>
<a href="#" target="_blank">账号管理</a>
<a href="#" target="_blank">系统设置</a>
<p>
    111111111111111111111
</p>
<p class="two">
    222222222222222222222
</p>
<p>
    333333333333333333333
</p>
<p>
    444444444444444444444
</p>
<p>
    333333333333333333333
</p>

<div>
    <h1>我是有粘性的！！！！！</h1>
</div>

</body>
</html>