position:static
忽略top/bottom/left/right或者z-index
position:relative
设置相对定位的元素不会脱离文档流
position:fixed
不会随着视口滚动而滚动，继承absolute的特点
position:sticky
和top属性搭配，可以设置吸附导航效果，但兼容性不太理想
demo
*{margin:0;padding:0;} div{width:100%;} .banner{text-align: center;background-color:#f2f4f6;padding:100px 0;} .nav{text-align: center;border:1px solid #333;position: sticky;top:0;background-color:#abcdef;padding:20px 0;} .content{width:60%;margin:50px auto;} p{margin-bottom:50px;}
这是广告图
导航 | 导航 | 导航
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
左侧固定三级导航demo：
demo
*{margin:0;padding:0;} .page{width:100%;} .nav{position: fixed;top:50%;left:0;width:160px;height:205px;margin-top:-102.5px;} .nav-li{width:100%;line-height:40px;text-align:center;color:#fff;background:#333;border-bottom:1px solid #fff;cursor: pointer;} .nav-li:hover ul{display: block;} .title{width:100%;height:40px;} .nav-li ul{width:100%;background-color: #fff;display: none;} .nav-li ul li{width:100%;height:40px;line-height:40px;text-align:center;color:#333;border-bottom:1px dashed #666;position: relative;} .nav-li ul li:hover .list3{display: block;} .list3{width:100%;position: absolute;top:0;left:160px;display: none;} .item3{width:100%;height:40px;line-height:40px;text-align:center;background:#444;color:#fff;border-bottom:1px dashed #666;}
一级导航1
- 二级导航1
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
三级导航1
三级导航2
三级导航3
三级导航4
一级导航1
- 二级导航1
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
- 二级导航3
- 二级导航4
一级导航1
- 二级导航1
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
- 二级导航3
- 二级导航4
一级导航1
- 二级导航1
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
- 二级导航3
- 二级导航4
一级导航1
- 二级导航1
三级导航1
三级导航2
三级导航3
三级导航4
- 二级导航2
- 二级导航3
- 二级导航4
html+css网页项目布局demo:
demo
*{margin:0;padding:0;} header{width:100%;height:100px;} header img{width:300px;height:85px;padding-left:100px;padding-top:8px;} .logo{float:left;} .nav{float:right;} .nav ul{padding-right:100px;} .nav ul li{float: left;list-style: none;width:80px;height:100px;line-height:100px;color:#333;} .main{position: relative;} .top{width:100%;height:600px;} .top img{width:100%;height:100%;} .topLayer{width:100%;height:600px;position: absolute;background-color: #000;opacity: .5;top:0;left:0;} .topLayer-top{width:500px;height:300px;position: absolute;top:280px;margin-top:-150px;z-index:2;left:50%;margin-left:-250px;} .word{padding-top:100px;color:#fff;font-size: 45px;font-weight: bold; text-align: center;} .topLayer-top button{width:200px;height:60px;margin-top:50px;color:#fff;background-color: #f5704f;font-weight: bold;text-align: center;font-size: 14px;border-radius:8px;margin-left:150px;border: 1px solid #fff;cursor: pointer;} .topLayer-top button:hover{background-color: #fff;color:#f5704f;border: 1px solid #f5704f;} .middle{width:1000px;margin:0 auto;} .common{float: left;width:33.3%;padding-top:50px;text-align: center;} .common img{width:100px;height:100px;} .com{font-size:20px;color:#7d7c7f;padding-top:20px;} .m-middle{font-size:22px;color:#e19796;font-weight:bold;padding-top:50px;font-style: italic;text-align: center;padding-bottom:50px;} .clear{clear:both;} .m-bottom{margin-bottom:20px;} .m-com{float: left;padding:10px;text-align: center;} .m-com img{width:310px;height:260px;} .des1{font-size:20px;color:#7d7d7f;padding-top:20px;} .des2{font-size:20px;color:#bdbdbc;padding-top:20px;} .bottom{background-color: #f9f9f9;padding-bottom:30px;} .bottom .content{width:1000px;margin:0 auto;} .content .title{text-align: center;font-size: 20px;color:#7d7c7f;padding:50px 0 30px 0;font-weight:bold;} .pic-content dl{width:470px;float: left;margin:10px 12px;} .pic-content dl img{width:470px;height:460px;} .pic-content dd{padding-top:15px;font-size: 16px;color:#7d7c7f;} footer{width:100%;height:100px;background-color: #292c35;color:#fff;font-size: 15px;text-align: center;line-height:100px;}
- 首页
- 图片
- 视频
- 手记
MY BEAUTIFUL LIFE
WECHAT
MICROBLOG
QQ
"I want to give good things to record down,
after the recall will be very beautiful."
Cool Image
Record The Picture
Great Picture
Record The Picture
Cool Image
Record The Picture
FROM THE PHOTO ALBUM
- Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
- Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
