首先Position在字面讲是位置的意思，在HTML中是定位的意思，它有四种属性：分别是static是静态的，也是默认的效果，没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

absolute（绝对定位）

absolute(绝对定位)不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了 自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简 称TRBL)来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。

　　relative(相对定位)只可以在文本流中进行位置的上下左右的移动，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比 一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分 就需要用到绝对定位。

　　fixed (固定定位)
生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　下面我用<三国杀>的实例具体讲一下Position的应用　：

　　<html>
    <head>
        <title>三国杀</title>
        <style>
              *{padding:0;margin:0;}
              a{text-decoration:none;}
              ul{list-style:none;}
              body{width:800px;margin: 0 auto;background:black;position:relative;}
              #bg{width:800px;height:600px;background-size:800px 600px;background-image:url(image/bgfight01.jpg);position:relative;}                        #card{width:155px;height:175px;position:relative;float:left;margin-left:5px;margin-bottom:5px;}
              #card #c1{width:155px;height:175px;background-size:100%;background-image:url(jiang/jlvbu_1200.jpg);position:absolute;}
              #card #c2{width:155px;height:175px;background-size:100%;background-image:url(image/vaiqu.png);position:absolute;}                        #card #c3{width:155px;height:175px;position:absolute;}    
              #c4{width:24px;height:36px;background-size:100%;background-image:url(image/vwei.png);position:absolute;top:17px;right:1px;}
              #c5{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:60px;right:4px;}
              #c6{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:79px;right:4px;}
              #c7{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:96px;right:4px;}
              #c8{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:115px;right:4px;}
              #c9{position:absolute;top:142px;right:12px;color:white;}
             
              .k1{position:absolute;top:449px;left:171px;}
              .k2{position:absolute;top:456px;left:176px;}
              .k3{position:absolute;top:449px;left:218px;}
              .k4{position:absolute;top:456px;left:224px;}
              .k5{position:absolute;top:449px;left:270px;}
              .k6{position:absolute;top:456px;left:275px;}
              .k7{position:absolute;top:449px;left:318px;}
              .k8{position:absolute;top:456px;left:326px;}

.huatuo{width:174px;height:170px;position:absolute;right:0px;top:434px;}
              .ht{width:152px;height:160px;background-image:url(jiang/jhuatuo_1200.jpg);position:absolute;background-size:100%;right:10px;}
              .yy{width:174px;height:180px;background-image:url(image/vp1qu.png);position:absolute;background-size:174px 180px;bottom:0px;}
              .jn1,.jn2{width:47px;height:51px; background-image:url(image/vjineng.png);background-size:47px 55px;position:absolute;left:18px;top:100px;text-align:center;color:#f00;font-weight:bold;line-height:22px;padding-top:4px;}
              .jn2{left:68px;}
              .x{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;left:117px;top:51px;}    
        </style>
    </head>
    <body>
        <div id="bg">
            <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jmenghuo_1200.jpg);">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
                        
                    </div>
                    
                    <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdengai_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
            
                <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jguanyu_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

<div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdiaochan_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

<div id="card" style="margin-right:0;">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jshensima_1200.jpg);">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
                    
            <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdaqiao_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

<div id="card" style="float:right">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="data:image/vp1cannot.png" id="c3">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
                
        
            </div>
                        
            
                
        </div>
                <img src="card/kbagua.png" class="k1"/>    
            <img src="data:image/vheitao.png" class="k2"/>
            <img src="card/knanman.png" class="k3"/>
            <img src="data:image/vhongtao.png" class="k4"/>
            <img src="card/kdawan.png" class="k5"/>    
            <img src="data:image/vfangkuai.png" class="k6"/>
            <img src="card/ktaoyuan.png" class="k7"/>    
            <img src="data:image/vmeihua.png" class="k8"/>
        <div class="huatuo">
            <div class="ht"></div>
            <div class="yy"></div>
            <ul></ul>
            <div class="jn1">急<br />救</div>
            <div class="jn2">青<br />囊</div>
            <div> class="x1"</div>
            <div> class="x2"</div>

</div>    
    </body>
</html>

解读Position的更多相关文章

  1. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  2. jQuery position() 源码解读

    position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, el ...

  3. css知多少（11）——position

    1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...

  4. position属性absolute与relative 详解

    最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...

  5. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  6. 对弈类游戏的人工智能(5)--2048游戏AI的解读

    前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...

  7. 时空上下文视觉跟踪（STC）算法的解读与代码复现（转）

    时空上下文视觉跟踪(STC)算法的解读与代码复现 zouxy09@qq.com http://blog.csdn.net/zouxy09 本博文主要是关注一篇视觉跟踪的论文.这篇论文是Kaihua Z ...

  8. 解读CSS的背景（background）样式

    background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background- ...

  9. iOS开发CoreAnimation解读之三——几种常用Layer的使用解析

    iOS开发CoreAnimation解读之三——几种常用Layer的使用解析 一.CAEmitterLayer 二.CAGradientLayer 三.CAReplicatorLayer 四.CASh ...

随机推荐

  1. WordPress创建多个page页面模板文件

    一般我们使用WordPress创建多个page页面模板文件,有两种方法: 一种是,创建page-$id.php文件 这样的文件是通过WordPress默认的链接查询来创建page页面模板文件,就是使用 ...

  2. 《精通并发与Netty》学习笔记（11 - 详解NIO (二) 分散/聚集 Scatter/Gather、Selector）

    一.分散/聚集 Scatter/Gather scatter/gather指的在多个缓冲区上实现一个简单的I/O操作,比如从通道中读取数据到多个缓冲区,或从多个缓冲区中写入数据到通道:scatter( ...

  3. libvirt2.0安装

    目录 1.libvirt介绍 2.卸载系统自带的libvirt 2.1.查看当前安装的libvirt相关包 2.2.全部卸载掉 3.使用tar包编译安装 3.1.解压缩 3.2.生成Makefile文 ...

  4. Redis内存分析工具—redis-rdb-tools （转载http://www.voidcn.com/article/p-axfdqxmd-bro.html）

    redis-rdb-tools是由Python写的用来分析Redis的rdb快照文件用的工具,它可以把rdb快照文件生成json文件或者生成报表用来分析Redis的使用详情.使用标准的diff工具比较 ...

  5. 数据库连接池——C3P0&Druid（快速入门）

    数据库连接池--C3P0&Druid (一) 数据库连接池 每一个事物都有其存在的意义,在初学jdbc的时候,我们建立数据库连接对象后,会对其进行释放,但是数据库连接的建立和关闭是非常消耗资源 ...

  6. 【贪心科技】贪心科技内容合伙人关于AI公司及创业的演讲笔记

    贪心科技内容合伙人关于AI公司及创业的演讲笔记 视频 目录 一.投资角度对 AI 的两个基本认知 二.简单分析 AI 公司的两个纬度四个层面 三.AI 垂直行业应用的三点中美对比 四.给创业者的四个建 ...

  7. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  8. Centos7 添加开机启动服务

    1.在/usr/lib/systemd/system/下创建服务脚本xxx.service,格式如下: [Unit] Description=Scrapyd After=syslog.target n ...

  9. 关于Linux操作系统中的一些易忘记的命令与作用

    1.改变文件或文件夹的权限,例如:chmod options mode file :[ugoa...] [+-=] [rwxXstugo],其中字符的含义如下: 第一组[ugoa...]:文件(夹)权 ...

  10. 用命令将本地项目上传到git

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...