解读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 ...
随机推荐
- C++中使用OPENCV对深度学习的特征图进行可视化
//需要先在运行目录下创建文件夹opencv_layers #include <iostream> #include <unistd.h> #include <openc ...
- souce and bash 的区别
对于一些环境变量的配置文件,如想使更改后立即生效,多用 souce +file 执行后即可.如/etc/profile 里加了配置, source 和 bash 的区别: source filena ...
- Ubuntu14.04LTS下 JAVA+HADOOP
首先在虚拟机中安装了Ubuntu14.04LTS 前期工作: 更新源.更新安装vim.安装vmtools工具.安装中文输入法 sudo apt-get update sudo apt-get inst ...
- TensorFlow.环境_avx2
1.缘由: 按照之前的步骤,在Win10的笔记本上就是不行: 1.1.jupyter notebook的相关界面,如下图所示: ZC:感觉 应该还是 tensorflow的问题 1.2.然后 各种测试 ...
- nssm设置solr开机启动服务
首先,下载nssm http://www.nssm.cc/download 命令 nssm install solr 然后到服务里启动solr,并设置为自动 Ctrl+Shift+Esc(说明:Esc ...
- 《MIT 6.828 Lab 1 Exercise 12》实验报告
本实验的网站链接:MIT 6.828 Lab 1 Exercise 12. 题目 Exercise 12. Modify your stack backtrace function to displa ...
- [DEBUG] java中用Runtime调用python 简单程序输出null
今天需要在java中调用python脚本,首先考虑的是java自带的Runtime 在ubuntu和win10下分别测试,发现win10报错 java源代码 @Test public void tes ...
- 【数据库-SQL Server】IDispatch error #3092
使用msado15.tlh,链接Microsoft SQL Server,执行语法(syntax)的时候出现IDispatch error #3092的错误. 1.语法错误 (1)保证语法正确,有些数 ...
- Photon Server 实现注册与登录(三) --- 前端UI设计和发起请求
一.打开之前的测试项目.先将服务端代码编译一下,在 bin/Debug/目录下会发现有一个Common.dill.我们相应导入到前端使用.直接拖拽到相应地方 UI相应布局属于前端操作,这里就不做介绍了 ...
- 第十章 ZYNQ-MIZ701 DDR3 PS读写操作方案
本编文章的目的主要用简明的方法在纯PS里对DDR3进行读写. 本文所使用的开发板是Miz701 PC 开发环境版本:Vivado 2015.4 Xilinx SDK 2015.4 10.0本章难度 ...