一、引言：

　　在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. Eclipse maven 错误修正方法：An error occurred while filtering resources

    最近打开Eclipse后发现项目报红叉,解决办法如下: 1.eclipse中删除该项目(注意:不要删除代码) 2.cmd,进入到项目目录下,执行命令:mvn eclipse:clean 3.重新导入项 ...

  2. 固态硬盘和机械硬盘双硬盘安装win10，提示无法找到系统

    选择兼容模式,自己慢慢找,不同的主板所在的位置不同,大概是cms(兼容的意思)这个选项,选择enable就可以了

  3. lamp安装总结

    1.安装准备   建一个目录用于存放各软件包的压缩文件, 如我把我的源码文件都放在了 /software目录下 切换到/software目录下,执行 wget http://dev.mysql.com ...

  4. Chrome——F12 谷歌开发者工具详解

    我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的, ...

  5. [转]一个故事讲清楚NIO

    假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) 职员打印票据,并将钱和票据返回给 ...

  6. Redis Cluster 4.0高可用集群安装、在线迁移操作记录

    之前介绍了redis cluster的结构及高可用集群部署过程,今天这里简单说下redis集群的迁移.由于之前的redis cluster集群环境部署的服务器性能有限,需要迁移到高配置的服务器上.考虑 ...

  7. django报错解决：view must be a callable or a list/tuple in the case of include().

    django版本:1.11.15 django应用,修改urls.py后,访问报错:TypeError at /view must be a callable or a list/tuple in t ...

  8. 六、springboot（三）配置双数据源

    1.目录结构 2.jdbc.properties配置 #db houge spring.datasource.houge.jdbc-url=jdbc:oracle:thin:@:ORCL spring ...

  9. Appium Desktop Inspector 安卓真机配置（Windows）

    本文是基于 Windows环境 通过Appium Desktop 测试真机,首先要确保测试机已经和电脑正确连接(将手机和电脑通过USB数据线连接,手机打开USB调试) 确认电脑与手机是否连接成功的方法 ...

  10. Windows Azure Virtual Network (12) 虚拟网络之间点对点连接VNet Peering

    <Windows Azure Platform 系列文章目录> 在有些时候,我们需要通过VNet Peering,把两个虚拟网络通过内网互通互联.比如: 1.在订阅A里的Virtual N ...