解读Position
首先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的更多相关文章
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- jQuery position() 源码解读
position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, el ...
- css知多少（11）——position
1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...
- position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- 对弈类游戏的人工智能(5)--2048游戏AI的解读
前言: 闲得没事, 网上搜"游戏AI", 看到一篇<<2048游戏的最佳算法是?来看看AI版作者的回答>>的文章. 而这篇文章刚好和之前讲的对弈类游戏AI对 ...
- 时空上下文视觉跟踪（STC）算法的解读与代码复现（转）
时空上下文视觉跟踪(STC)算法的解读与代码复现 zouxy09@qq.com http://blog.csdn.net/zouxy09 本博文主要是关注一篇视觉跟踪的论文.这篇论文是Kaihua Z ...
- 解读CSS的背景（background）样式
background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background- ...
- iOS开发CoreAnimation解读之三——几种常用Layer的使用解析
iOS开发CoreAnimation解读之三——几种常用Layer的使用解析 一.CAEmitterLayer 二.CAGradientLayer 三.CAReplicatorLayer 四.CASh ...
随机推荐
- 学习SpringBoot整合SSM三大框架源码之SpringBoot
Spring Boot源码剖析 一.Spring Boot 项目的启动入口流程分析 Spring Boot项目的启动入口main线程上有一个@SpringBootApplication( @Confi ...
- Insomni’hack CTF-l33t-hoster复现分析
题目地址: https://github.com/eboda/insomnihack/tree/master/l33t_hoster 源码如下: <?php if (isset($_GET[&q ...
- mongodb 连接后无法使用 发现已经有进程在运行
mongod 命令执行发现已经有进程在运行mongod数据库--errno:48 Address already in use for socket: 0.0.0.0:27017 错误信息: list ...
- StormUI各参数详解
参考:http://www.malinga.me/reading-and-understanding-the-storm-ui-storm-ui-explained/
- SQL SERVER修改字段为首字母大写
--修改字段为首字母大写 -- EXEC sp_rename 'ShenBao_CaiGouFuKuan.Tid', 'Tid', @objtype = 'COLUMN'; SELECT 'EXEC ...
- IDEA下tomcat启动后 server乱码，Tomcat Catalina Log乱码问题的解决
如果你初接触Idea,一定会遇到控制台乱码的问题,这里和eclipse有点不一样,看如下办法: 乱码的根本原因:Windows系统的cmd是GBK编码的,所以IDEA的下方log输出的部分的编码也是G ...
- java源码--ArrayList
1.1.ArrayList概述 1)ArrayList是可以动态增长和缩减的索引序列,它是基于数组实现的List类. 2)该类封装了一个动态再分配的Object[]数组,每一个类对象都有一个capac ...
- 二维状压DP经典题
炮兵阵地 题目链接 题目大意:在n*m的地图上放置炮兵,每个炮兵的攻击范围是上下左右两格内,有两种不同的地形,山地(用"H" 表示),平原(用"P"表示),只有 ...
- Python基础『一』
内置数据类型 数据名称 例子 数字: Bool,Complex,Float,Integer True/False; z=a+bj; 1.23; 123 字符串: String '123456' 元组: ...
- SHE姐妹建模记录
中午11点54分,队长把MD5码提交上去在群里发了截图,我对着屏幕上刚检查完的论文,感觉整个人都轻松起来了,又有点恍惚,可能是这几天都没睡好觉.去楼下吃了顿饭,本来打算回来倒头就睡,睡到几点算几点,醒 ...