在网页页面设计方案中，position特性的应用是是非非常关键的。有时假如不可以了解清晰这个特性，可能给大家带来许多出乎意料的艰难。
position特性共有4种不一样的精准定位方式，各自是static、fixed、relative、absolute。最终可能详细介绍和position特性紧密有关的z-index特性。
第1一部分：position: static
static精准定位是HTML元素的默认设置值，即沒有精准定位，元素出現在一切正常的流中，因而，这类精准定位就不容易收到top，bottom,left,right的危害。
如html编码以下：
<div class="wrap">
<div class="content"></div>
</div>
css编码以下：
.wrap{width: 300px;height: 300px; background: red;}
.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}
实际效果图以下：
大家发现，尽管设定了static和top，可是元素依然出現在一切正常的流中。
第2一部分：fixed精准定位
fixed精准定位是指元素的部位相对访问器对话框是固定不动部位，即便对话框是翻转的它也不容易翻转，且fixed精准定位使元素的部位与文本文档流不相干，因而不占有室内空间，且它会和别的元素产生重合。
html编码以下：
<div class="content">我是应用fix来精准定位的！！！因此我相对访问器对话框，1直没动。</div>
css编码以下：
body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}
实际效果图以下：
即右下角的div始终不容易动，就像常常弹出来的广告宣传！！！
值得留意的是：fixed精准定位在IE7和IE8下必须叙述！DOCTYPE才可以适用。
第3一部分：relative精准定位
相对性精准定位元素的精准定位是相对性它自身的一切正常部位的精准定位。
重要：怎样了解其本身的座标呢？
让大家看这样1个事例，hmtl以下：
<h2>这是坐落于一切正常部位的题目</h2> <h2 class="pos_bottom">这个题目相对其一切正常部位向下挪动</h2> <h2 class="pos_right">这个题目相对其一切正常部位向右挪动</h2>
css编码以下：
.pos_bottom{position:relative; bottom:⑵0px;}
.pos_right{position:relative;left:50px;}
实际效果图以下：
即bottom:⑵0px;；向下挪动。 left:50px;向右挪动。
便可以了解为：挪动后是挪动前的负的部位。
例如上例中，挪动后是挪动前负的bottom:⑵0px;即挪动后是挪动前bottom:20px;也便是说，挪动后是挪动前的向下20px；
又如：left:50px;挪动后是挪动前左侧的⑸0px;那末也便是说挪动后是挪动前的右侧的50px。
即：挪动后针对挪动前：假如值为负数，则立即换为整数金额；假如值为整数金额，则立即更改相对性方位。
搞清楚了relative是怎样挪动的，下面大家看1看挪动以后是不是会造成别的的危害。
html编码以下：
<h2>这是1个沒有精准定位的题目</h2> <h2 class="pos_top">这个题目是依据其一切正常部位向上挪动</h2> <p><b>留意:</b> 即便相对性精准定位元素的內容是挪动,预留室内空间的元素仍储存在一切正常流动性。</p>
css编码以下：
h2.pos_top{position:relative;top:⑶5px;}
实际效果图以下：
依据以前的说法，top:⑶5px；值是负数，则立即换为正数，即挪动后相对性与挪动前向上偏位了35px；大家发现于上，挪动后和上面的元素产生了重合；于下，即便相对性元素的內容挪动了，可是预留室内空间的元素依然储存在一切正常流动性，也便是说相对性挪动以后，不容易对下面的别的元素导致危害。
第4一部分：absolute精准定位
肯定精准定位的元素相对近期的已精准定位父元素，假如元素沒有已精准定位的父元素，那末它的部位相对<html>。
下面举几个事例：
事例1：
<title>肯定精准定位</title>
<style> body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
<div class="parent">
<div class="son">
<span>甚么？</span>
</div>
</div>
实际效果以下：
即我只在span中设定了position:absolute；而在其父元素中都沒有，因而它的部位是相对html的。
例2:
.son{position: relative; width: 100px;height: 100px;background: #aaa; }
相较于上1个事例，我只改动了class为son的元素的css，设定为position：relative；实际效果图以下：
因而，大家发现如今span的部位是相对设有position特性的class为son的父元素的。
例3：
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}
这个事例我只是改动了第1个事例中的css--设定了position:absolute；实际效果以下：
因而大家发现，如今span的精准定位是相对具备position:absolute的特性的class为parent的父元素。
例4：
.parent{position:fixed; width: 300px;height: 300px;background: #ccc;}
相对例1，我加上了fixed的position特性，发现結果和例3是1模1样的。
例5：
.parent{position:static; width: 300px;height: 300px;background: #ccc;}
相对例1，我加上了static的position特性（即html的默认设置特性），結果和例1是1样的。
综上所述，当某个absolute精准定位元素的父元素具备position:relative/absolute/fixed时，精准定位元素都会根据父元素而精准定位，而父元素沒有设定position特性或设定了默认设置特性，那末精准定位特性会根据html元向来精准定位。
第5一部分：重合的元素--z-index特性
最先申明：z-index只能在position特性值为relative或absolute或fixed的元素上合理。
基础基本原理是：z-index的值能够操纵精准定位元素在竖直于显示信息显示屏方位（z轴）上的层叠次序(stack order),值大的元素产生重合时会在值小的元素上面。
下面大家根据几个事例再次来了解这个特性。
例1：
即son1和son2是parent的两个子元素，实际效果图以下：
这是沒有应用z-index，大家发现son2在son1之上，这是由于son2在html中排在了son1以后，因此后来者将前者遮盖，假如大家错乱下列二者的次序，就会发现蓝色(son1)在到了。
例2：
在son1中添加z-index：1；能够发现实际效果以下：
也便是说son2的index值是小于1的。
假如大家给son2也再加z-index:1;呢？結果获得黄色(son2)就在上面了。（由于1旦z-index值相同，状况就和都不设定index值1样了）
例3：
在son2中添加z-index:5;能够发现实际效果以下：
即黄色(son2)又在上面了，这个很简易，不作过量探讨。
例4：
在父元素加上z-index:10;
在son1和son2加上z-index:5; 这样基础理论上父元素就会在上面（黄色遮盖蓝色和黄色）；
結果以下：
結果沒有变!!!!! 这就表明父元素和子元素不可以做z-index的较为！！！但真的是这样吗？看下1个事例：
例5：
把两个子元素的z-index值另外设定为⑸；父元素不设定z-index特性。結果以下：
取得成功！！表明在父元素和子元素之间還是能够作较为的！！！只是必须大家把子元素的z-index值设为负数。
例6：
大家在例5的基本上再给父元素加上1个z-index:10，讲道理~应当还可以获得和例5同样的結果吧！！
但是.... 来看大家不可以设定父元素的z-index值，不然就不可以出現大家要想的实际效果。下面再看1个趣味的事例!
例7：
大家依据例6的工作经验不设定父元素的值，如今设定son1(蓝色)的z-index为5，son2的z-index为⑸，看下面的結果：
即son1在最上面，父元素在正中间，son2在最下面。
针对z-index的探寻就这样完毕了吗？？自然沒有，看下面几个更加趣味的事例吧。
例8：
编码以下：
实际效果以下：
尽管parent1和parent2各自是son1和son2的父元素，依照大家以前的了解，父元素是不能加上z-index值的，不然会致使不正确。可是这里parent1和parent2相对body又是子元素，他俩是同级的，因此便可以开展较为了。且此时parent1的子元素son1（蓝色）在上。
例9：
假如大家在例7的基本上，把parent2的z-index值设为20，就会发现以下实际效果：
即parent2在上的另外son2也会另外在上。这也便是所谓的“拼爹”了！！
例10.一样在例7的基本上，大家不设定parent1和parent2和son2的index值，而只设定son1的z-index值为10，实际效果以下:
即本来在下面的蓝色son1被提上来了，而沒有把父元素（parent1）提到了，诶，不孝敬啊！！
例11.明显，在例10的基本上，假如大家把son2的index值设定的比son1的大，如20，那末son2就会遮盖son1了，而且都在两个父元素只到了！！
实际效果以下图：
例12.自然，假如大家把两个son的z-index都设定位负数如⑸，那末二者就都会被父元素所遮盖：
第6一部分：总结
这1一部分专业知识還是十分成心思的，期待大伙儿能够再次探寻，自然假如根据这篇博文给予大伙儿1点点的协助那就再好但是了！
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 抠图换背景_免费的抠图软件_美图抠图_手机抠图软件哪个好_p图软件哪个好用 版权所有 （网站地图） 粤ICP备10235580号