解读Position
2018-06-24 00:19:42来源：未知 阅读 ()
首先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="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="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="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="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="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="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="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="image/vheitao.png" class="k2"/>
<img src="card/knanman.png" class="k3"/>
<img src="image/vhongtao.png" class="k4"/>
<img src="card/kdawan.png" class="k5"/>
<img src="image/vfangkuai.png" class="k6"/>
<img src="card/ktaoyuan.png" class="k7"/>
<img src="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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- position定位，CSS入门必备, 好像以后有个更厉害的flex！ 2020-03-07
- position属性值4缺一带你了解相对还是绝对抑或是固定定位 2020-02-15
- position定位及实际应用 2020-01-31
- css position:sticky的尝试 2019-12-08
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
