一、引言：

　　在css众多属性中，position算是里面用的比较多也相对来说比较重要的属性了，它对于单个标签的“定位”、标签之间的“相对位置定位”还有网页的分层来说十分重要！

　　二、“定位的实现”具体介绍

　　position属性下常用的有fixed、relative跟absolute方式，其中fixed是实现“固定在浏览器窗口的某个位置”的功能的；而relative单独用没有任何意义，绝大多数情况下都是relative+absolute联合使用的：

　　2.1 fixed介绍：

　　2.1.1 我们在浏览网页时，通常会看到不论网页怎么上下滚动，右下角总有一个“固定”的“返回顶部”的标签，这个标签就是用fixed做的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 50px;height: 50px;background-color: #333333;color: #fafafa;

    position: fixed;

    bottom: 50px;

    right: 50px;">返回顶部</div>

    <div style="height: 5000px;background-color: grey"></div>

</body>

</html>

fixed

　　2.1.2 这里还有个例子，我们想实现“网页的头部不随着鼠标滚动一直留在顶部”的效果，这在实际中用的也非常多，具体代码实现如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-top{

            background-color: #333333;

            color:white;

            position:fixed;

            width:100%;

            height:22px;

            top:0;

            text-align: center;

            line-height:22px;

        }

        .pg-home{

            background-color:grey;

            color:yellow;

            height: 3333px;

            margin-top:22px ;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="pg-top">我是顶部</div>

    <div class="pg-home">

        <p>adasd</p>

        <p>adaaasd</p>

        <p>adcccasd</p>

        <p>adavvsd</p>

        <p>adaaasd</p>

        <p>adzzzasd</p>

    </div>

</body>

</html>

fixed2

效果如下：

　　2.2 relative+absolute介绍

　　我们用这种模式绝大多数情况下是实现子类标签相对于父类标签的位置的，看下面的效果就明白了：

　　我们要实现上图所示的效果，利用relative+absolute就可以了，实现代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .site-main{

            position: relative;

            border: 1px solid red;

            margin: 0 auto;/*使div居中*/

            height:200px;

            width:500px;

        }

        .main-l{

            position: absolute;

            left:0;

            bottom:0;

            width:50px;

            height:50px;

            background-color: yellow;

            border: 1px solid green;

        }

        .main-r{

            position:absolute;

            right:0;

            bottom:0;

            width:66px;

            height:66px;

            background-color: aqua;

            border: 1px dashed orangered;

        }

        .main-m{

            position: absolute;

            right:230px;

            bottom:0;

            width:66px;

            height:66px;

            background-color: fuchsia;

            border: 1px dashed sandybrown;

        }

    </style>

</head>

<body style="margin: 0 auto;">

    <div class="site-main">

        div1

        <div class="main-l">div11</div>

    </div>

    <div class="site-main">

        div2

        <div class="main-r">div21</div>

    </div>

    <div class="site-main">

        div3

        <div class="main-m">div31</div>

    </div>

</body>

</html>

relative+absolute

　　三、页面分层介绍：

　　这里需要注意的是：我们写的网页如果不用position方法默认是在最底层，也就是第一层；如果利用position的fixed方法那么这个标签其实放置在了页面的第二层；如果再想在第二层上面放置一层的话，就要用到z-index了，z-index的值越大标签就在越上层！这里需要与margin属性配合使用进行定位：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .top{

            z-index: 5;/*z-index的值谁大谁在上面*/

            height: 255px;

            background-color: green;

            opacity:1;/*透明度*/

            position: fixed;

            top:0;

            bottom:0;

            left: 0;

            right:0;

        }

        .top-top{

            z-index: 10;/*z-index的值谁大谁在上面*/

            height:155px;

            width: 155px;

            background-color: white;

            opacity:1;/*透明度*/

            position: fixed;

            top:50px;

            left: 50%;

            margin-left: -100px;

        }

    </style>

</head>

<body style="margin:0 auto;">

    <div class="top-top"></div>

    <div class="top"></div>

    <div style="height: 500px;background-color: grey;">dasdas</div>

</body>

</html>

页面分层

效果如下：

　　最后需要注意的是：在具体开发时，我们一般都会默认使二三层隐藏（display:none），然后在一定的触发条件下改变二、三层的display值达到相应的效果。

css属性—position的使用与页面的分层介绍的更多相关文章

  1. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  2. css属性position的运用

    随着web标准的规范化,网页的布局也随之千变万化.各种复杂漂亮有创意的页面布局冲 击这人们的视野,相比以前的table布局那就不是一等级的事儿.这个很大一部分功劳是css 样式的引入.而这个多样性布局 ...

  3. 详解 CSS 属性 - position

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed ...

  4. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  5. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  6. CSS之position体验

    目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...

  7. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  8. CSS属性之position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. js验证后台传递的map数据是否为空

    if(JSON.stringify(data)=='{}'){ $("#year").append("<option>--请选择--</option&g ...

  2. Js 判断输入的验证码是否一致

    实现效果: 判断输入的验证码是否一致 如果不同,alert出验证码输入有误~, 输入正确输出登录成功. <!DOCTYPE html> <html lang="en&quo ...

  3. 一篇文章看懂java反射机制（反射实例化对象-反射获得构造方法,获得普通方法,获得字段属性）

    Class<?> cls = Class.forName("cn.mldn.demo.Person"); // 取得Class对象传入一个包名+类名的字符串就可以得到C ...

  4. centos7如何安装zabbix

    只需要按照第三次修改版本的内容安装就可以了(水平线内的内容),主要是执行两个脚本就可以完成自动化安装了,其他内容是以前写的,仅留下来作为参考 第三次修改:(此次为zabbix4.0版本的,进一步的自动 ...

  5. Cassandra基础3

    cassandra读性能优化:1.禁用read repair每次读操作,无论读请求设置读一个节点还是多个节点,cassandra返回给客户端最新的数据后,都会后台对比所有副本的数据并对差异数据进行修复 ...

  6. OFIFG fault when using DCO in MSP430

    The OFIFG flag always set in my recent MSP430 smoke device project. In this A sample hardware, there ...

  7. Exclude the folders/files for indexing

    如果你的项目有非常多的文件,目录,Eclipse 有一个很好的Resource Filter 可以把有某些特征的文件,目录不再进行索引.

  8. react：路由登陆后才能访问的控制

    react-router 通过创建一个 需要认证的路由 来限制登陆后才能访问. 官方例子:https://reacttraining.com/react-router/web/example/auth ...

  9. fastjson总结

    1,文件的转成字节数组byte[]的时候,可以直接用fastjson序列化和反序列化 2,用@RequestBody接受json的时候,content-type是否已经application/json ...

  10. npm安装教程(vue.js）

    https://www.cnblogs.com/goldlong/p/8027997.html 首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Googl ...