一、引言：

　　在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. ionic打包步骤（安卓）

    打包APP之前要做的工作: ionic resources -icon : [创建一个app图标]: 以png/psd/AI格式保存在项目目录下的:resource/android/icon.png ...

  2. 【JVM】jvm虚拟机参数解析

    转载:https://blog.csdn.net/see__you__again/article/details/51998038不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正 ...

  3. 10 Rules of Highly Successful Project Management

    I commited the information below to report PDU of PMI. ^_^. In this paper, the author introduces his ...

  4. java_main

    Java中用户向系统传递参数的三种基本方式 main方法 在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这个方法和其他的 ...

  5. 【KiCad】 如何给元件给元件的管脚加上划线？

    如何给元件给元件的管脚加上划线? 在一线元件需要注明一些引脚是低电位使能的. 比如这样. 每款 EDA 软件有不同的做法,有的是在前后使用 /,有的是给每个字母加上 /. KiCad 不一样,使用的是 ...

  6. Flex Cairngorm框架知识整理

    简介: Cairngorm是一个开源的Flex项目,为FLex提供了一个类似MVC的体系结构框架,它是Flex RIA开发的最好框架之一.使用Cairngorm框架可以大大提高开发和维护的效率. Ca ...

  7. Delphi 初始化的顺序

    一.存储结构: 初始化单元存储在一个数组InitContext.InitTable^.UnitInfo中,其中UnitInfo是以数组的方式存储的,其中InitTable的定义为: 其中InitTab ...

  8. CodeReview常见代码问题

    路线图 常见代码问题空值未捕获潜在的异常低性能影响范围过大单测问题与原有业务逻辑不兼容缺乏必要日志错误码不符合规范参数检测缺乏或不足引用错误细节错误多重条件文不符实跨语言或跨系统交互可维护性问题硬编码 ...

  9. Linux下安装uci

    Compiling UCI as stand alone cd ~ git clone git://nbd.name/uci.git ~/uci cd ~/uci cmake -DBUILD_LUA= ...

  10. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...