解读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 ...
随机推荐
- Qt 开源串口工具serialplot
一.总结 serialplot,可视化很强大的串口收发工具.源代码:https://bitbucket.org/hyOzd/serialplot 1.serialplot用到了qwt插件,所以先安装好 ...
- composer全量镜像使用方法
原文网址:https://pkg.phpcomposer.com/ Packagist 镜像使用方法 还没安装 Composer 吗?请往下看如何安装 Composer . 镜像用法 有两种方式启用本 ...
- 【AMAD】django-crispy-forms -- 不要再重复编写Django Form了！
动机 简介 个人评分 动机 这个APP提供了一个template tag和一个template filter,让你可以在模版中快速渲染表单. 简介 django-crispy-forms1可以看作是d ...
- 冲刺Noip2017模拟赛6 解题报告——五十岚芒果酱
1．ksum(ksum) [问题描述] Peter喜欢玩数组.NOIP这天,他从Jason手里得到了大小为n的一个正整数 数组. Peter求出了这个数组的所有子段和,并将这n(n+)/2个数降序排序 ...
- SpreadJS：一款高度类似Excel的开发工具，功能涵盖Excel的 95% 以上
Excel 作为一款深受用户喜爱的电子表格工具,借助其直观的界面.出色的计算性能.数据分析和图表,已经成为数据统计领域不可或缺的软件之一. 基于Excel对数据处理与分析的卓越表现,把Excel的功能 ...
- lab3:系统调用
jos系统调用函数链 记录自己对jos系统调用实现的理解. 用户程序访问系统服务的方法 用户使用系统服务的方式大概分为如下几种: (1)用户程序---->库函数----->系统调用---- ...
- 2019 Multi-University Training Contest 2: 1010 Just Skip The Problem 自闭记
2019 Multi-University Training Contest 2: 1010 Just Skip The Problem 自闭记 题意 多测.每次给你一个数\(n\),你可以同时问无数 ...
- Ubuntu 18.04修改默认源为国内源
安装Ubuntu 18.04后,使用国外源太慢了,修改为国内源会快很多. 修改阿里源为Ubuntu 18.04默认的源 备份/etc/apt/sources.list 备份 cp /etc/apt/s ...
- 小白学PYTHON时最容易犯的6个错误
最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...
- windows下memcache扩展安装和搭建
### windows下memcache扩展安装和搭建 背景:在做微信公众号的开发时,token的有效期为7200秒,所以需要对token进行保存,在这选择了memcache作为缓存工具 memcac ...