position:static

忽略top/bottom/left/right或者z-index

position:relative

设置相对定位的元素不会脱离文档流

position:fixed

不会随着视口滚动而滚动，继承absolute的特点

position:sticky

和top属性搭配，可以设置吸附导航效果，但兼容性不太理想

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

        *{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;}

    </style>

</head>

<body>

    <div class="banner">这是广告图</div>

    <div class="nav">导航 | 导航 | 导航</div>

    <div class="content">

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

        <p>position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。</p>

    </div>

</body>

</html>

左侧固定三级导航demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

        *{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%;/*height:40px;*/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;}

    </style>

</head>

<body>

    <div class="page">

        <div class="nav">

            <div class="nav-li">

                <div calss="title">一级导航1</div>

                <ul>

                    <li>二级导航1

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="nav-li">

                <div calss="title">一级导航1</div>

                <ul>

                    <li>二级导航1

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2</li>

                    <li>二级导航3</li>

                    <li>二级导航4</li>

                </ul>

            </div>

            <div class="nav-li">

                <div calss="title">一级导航1</div>

                <ul>

                    <li>二级导航1

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2</li>

                    <li>二级导航3</li>

                    <li>二级导航4</li>

                </ul>

            </div>

            <div class="nav-li">

                <div calss="title">一级导航1</div>

                <ul>

                    <li>二级导航1

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2</li>

                    <li>二级导航3</li>

                    <li>二级导航4</li>

                </ul>

            </div>

            <div class="nav-li">

                <div calss="title">一级导航1</div>

                <ul>

                    <li>二级导航1

                        <div class="list3">

                            <div class="item3">三级导航1</div>

                            <div class="item3">三级导航2</div>

                            <div class="item3">三级导航3</div>

                            <div class="item3">三级导航4</div>

                        </div>

                    </li>

                    <li>二级导航2</li>

                    <li>二级导航3</li>

                    <li>二级导航4</li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>

html+css网页项目布局demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

        *{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;/*font-weight:bold;*/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;}

    </style>

</head>

<body>

    <header>

        <div class="logo"><img src="img/logo.png" alt="logo"></div>

        <div class="nav">

            <ul>

                <li>首页</li>

                <li>图片</li>

                <li>视频</li>

                <li>手记</li>

            </ul>

        </div>

    </header>

    <div class="main">

        <div class="top">

            <img src="img/1.jpeg" alt="1">

        </div>

        <div class="topLayer"></div>

        <div class="topLayer-top">

            <div class="word">MY BEAUTIFUL LIFE</div>

            <button>LOOK MORE &gt;</button>

        </div>

        <div class="middle">

            <div class="m-top">

                <div class="common weixin">

                    <img src="img/weixin.png" alt="weixin">

                    <div class="com">WECHAT</div>

                </div>

                <div class="common weibo">

                    <img src="img/weibo.png" alt="weibo">

                    <div class="com">MICROBLOG</div>

                </div>

                <div class="common qq">

                    <img src="img/qq.png" alt="qq">

                    <div class="com">QQ</div>

                </div>

                <div class="clear"></div>

            </div>

            <div class="m-middle">

                "I want to give good things to record down,<br>after the recall will be very beautiful."

            </div>

            <div class="m-bottom">

                <div class="m-com">

                    <img src="img/03-01.jpg" alt="">

                    <div class="des1">Cool Image</div>

                    <div Class="des2">Record The Picture</div>

                </div>

                <div class="m-com">

                    <img src="img/03-02.jpg" alt="">

                    <div class="des1">Great Picture</div>

                    <div class="des2">Record The Picture</div>

                </div>

                <div class="m-com">

                    <img src="img/03-03.jpg" alt="">

                    <div class="des1">Cool Image</div>

                    <div class="des2">Record The Picture</div>

                </div>

                <div class="clear"></div>

            </div>

        </div>

        <div class="bottom">

            <div class="content">

                <div class="title">FROM THE PHOTO ALBUM</div>

                <div class="pic-content">

                    <dl>

                        <dt><img src="img/04-01.jpg"></dt>

                        <dd>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.</dd>

                    </dl>

                    <dl>

                        <dt><img src="img/04-02.jpg"></dt>

                        <dd>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.</dd>

                    </dl>

                    <div class="clear"></div>

                </div>

            </div>

        </div>

    </div>

    <footer>

        &copy; 2019 test.com 备案号xxxxxxxx号

    </footer>

</body>

</html>

css基础-定位+网页布局案例的更多相关文章

  1. css 实现的网页布局

      css 实现网页布局,上中下三部分,中间为固定宽度且分为左右两部分 <!DOCTYPE html> <html> <head> <meta charset ...

  2. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

  4. CSS基础 定位相关属性的使用方法

    1.相对定位:position:relative: 属性名:position 属性值:relative: 特点:1.相对自己的位置移动 2.配合方位名词移动,如:top.left.right,bott ...

  5. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  6. css基础-2 div布局

    div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...

  7. 网页布局（html＋css基础）

    一.如何用CSS进行网页布局 二.网页布局基础 三.网页简单布局之结构和表现原则 四.CSS Sprite雪碧图应用 什么叫布局? 网页的特点: 网页自适应宽度: 网页长度无限延长: (分栏也叫分列, ...

  8. CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  9. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

随机推荐

  1. MySQL5.7 中的query_cache_size

    摘自:http://jackyrong.iteye.com/blog/2173523 1 原理    MySQL查询缓存保存查询返回的完整结果.当查询命中该缓存,会立刻返回结果,跳过了解析,优化和执行 ...

  2. DWZ框架--页面样式丢失

    案例 今天我导入DWZ框架demo时,发现主页面样式丢失,出现了如下图那鬼样: 正常情况应该是有表格显示,并且用chrome开发者模式调试,可以看到有对应的样式,如下图所示: 先简单介绍下dwz框架的 ...

  3. CUDA学习（四）之使用全局内存进行归约求和（一个包含N个线程的线程块）

    问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...

  4. Netty学习（1）：IO模型之BIO

    概述 Netty其实就是一个异步的.基于事件驱动的框架,其作用是用来开发高性能.高可靠的IO程序. 因此下面就让我们从Java的IO模型来逐步深入学习Netty. IO模型 IO模型简单来说,就是采用 ...

  5. 学习Qt的资源-网站、论坛、博客等

    来自<零基础学Qt 4编程>一书的附录 附录C Qt资源 C.1 Qt 官方资源 全球各大公司以及独立开发人员每天都在加入 Qt 的开发社区.他们已经认识到了Qt 的架构本身便可加快应用程 ...

  6. python学习记录（七）

    0904--https://www.cnblogs.com/fnng/archive/2013/04/24/3039335.html 0904--https://www.cnblogs.com/fnn ...

  7. Codeforces_729_E

    http://codeforces.com/problemset/problem/729/E 存在的数必须连续,若不连续,从最后选人来补,注意根不是0和其他点是0的情况. #include<io ...

  8. BZOJ 2434 阿狸的打字机(ac自动机+dfs序+树状数组)

    题意 给你一些串,还有一些询问 问你第x个串在第y个串中出现了多少次 思路 对这些串建ac自动机 根据fail树的性质:若x节点是trie中root到t任意一个节点的fail树的祖先,那么x一定是y的 ...

  9. tomcat-windows10环境搭建

    1.进入Tomcat官网Apache Tomcat® - Welcome! 2.根据操作系统选择合适的版本下载 zip用于windows操作系统, tar.gz用于unix和linux操作系统 Bin ...

  10. k8s系列---StorageClass

    介绍这个概念前,需要提前知道存储卷pv/pvc之类的概念. 之前的文章有关于EFK日志系统的介绍,里面的环境是测试环境,完全按照教程一步步的操作,甚至注释掉了持久化存储,当真正线上部署时,又抓虾,打开 ...