一、引言：

　　在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. oracle用exp导出dmp文件时发现空表没有导出来

    问题: 今天,从同事电脑考oracle11g中dmp文件,在自己电脑导入,发现少了很多表,而且少的这些表都是空表. 原因: oracle11g 默认的deferred_segment_creation ...

  2. itcast-svn

    svn介绍 1.1     svn服务器的工作方式 数据   库  服务 概念   使用数据库,连接服务,服务操作库 独立服务器方式: svnserve 借助Apache方式: mod_dav_svn ...

  3. Python实例属性限制(__slots__)

    Python的动态绑定可以在程序运行的过程中对实例或class加上功能,但是如果我们想要限制实例的属性怎么办呢?更改内容请参考:Python学习指南 正常情况下,当我们定义了一个class,创建了一个 ...

  4. 反射中setAccessible()方法

    调用私有变量域的时候要用setAccessible https://blog.csdn.net/kjfcpua/article/details/8496911

  5. 代理模式proxy

    代理模式的共同优点如下: (1) 能够协调调用者和被调用者,在一定程度上降低了系统的耦合度. (2) 客户端可以针对抽象主题角色进行编程,增加和更换代理类无须修改源代码,符合开闭原则,系统具有较好的灵 ...

  6. amqp 和 exchange 详细解释

    amqp  的 excange 字面意思是一个交换机.他的任务是吧 消息 分配给消息队列. amqp 的  exchange 有三种,分别是 Direct , fanout 和 toppic.三种. ...

  7. cocos 3.16 生成预编译库模板

    打开模板功能 不知道什么原因,cocos 3.16关闭了模板功能,因此使用cocos -h命令时,无法显示gen-templates参数. 打开的方式也挺简单,打开tools/cocos2d-cons ...

  8. RedHat如何关闭防火墙

    1.查看防火墙是否已开启 #可以查看到iptables服务的当前状态. service iptables status​ 上图表示防火墙已关闭. 2.关闭防火墙 关闭防火墙的方法为:   1)永久性生 ...

  9. java的几种对象(po,dto,dao等)

    j2ee中,经常提到几种对象(object),理解他们的含义有助于我们更好的理解面向对象的设计思维.     POJO(plain old java object):普通的java对象,有别于特殊的j ...

  10. redis水平扩展实践，完全配置，无需代码改动

    设计思路 思路很简单,就是基于用户ID进行分库,将用户的ID字符串按照byte逐个计算ID对应的hash原值(一个数字,取绝对值,因为原始值可能过大溢出,变成负数),然后,再用这个hash原值对库的个 ...