一、引言：

　　在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. Go Example--闭包

    package main import "fmt" func main() { //这里需要将闭包函数当作一个类理解,这里是实例化 nextInt := intSeq() fmt. ...

  2. 自动交互安装服务应用，以redis为例

    #!/bin/bash#新建preinstall.sh文件,该文件完成安装前的准备 yum install gcc gcc-* wget expect -y #expect是因为后面我们用到,安装后可 ...

  3. [转]C# FTP操作类

      转自 http://www.cnblogs.com/Liyuting/p/7084718.html using System; using System.Collections.Generic; ...

  4. Ajax 异步请求返回集合遍历问题

    for(var i = 0;data.length;I++){ var value = data[i]; } 这种遍历,如果方法体没有取值,则页面会卡死,具体原因待解,如果有方法体取值,则所取值val ...

  5. hdfs1.0和2.0复习

    1.Namenode元数据两种映射:(1)文件名 -> block数据块的映射(2)block数据块 -> datanode节点地址的映射细节:(1)是持久化到NN的磁盘的(fsimage ...

  6. 1、Nginx集群tomcat

    一.准备工作 下载nginx,http://nginx.org/,本文采用nginx-1.8.0,下载之后直接解压,免安装 下载tomcat,以配置3台tomcat服务器做负载均衡为例 二.修改tom ...

  7. MySQL 过滤数据（WHERE子句）

    WHERE子句操作符 从表products中检索prod_name,prod_price列,返回prod_price=2.5的行 mysql> SELECT  prod_name, prod_p ...

  8. Android 单元测试覆盖率计算

    在工程下面的build.gradle 增加配置 1.增加Plugin apply plugin: 'jacoco' 2. 增加jacoco版本 jacoco{ version "0.7.4. ...

  9. Oracle和SQL语句的优化策略（基础篇）

    转载自: http://blog.csdn.net/houpengfei111/article/details/9245337 http://blog.csdn.net/uniqed/article/ ...

  10. 手机浏览器User-Agent信息

    ChormeMozilla/5.0 (Linux; Android 4.2.1; AMOI N828 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gec ...