web前端css--position

对于position它是一个基础的知识，运用范围十分广泛，这部分知识彻底理解感悟，对后面的前端开发有很大的帮助。

postion顾名思义就是一个元素的位置，如果我们对于网页上一个元素需要放置在一个特定的位置那么这个元素就能轻松实现。比如：网页文章中一个固定的分享按钮或者回到文章顶部按钮、还有一个悬浮的广告都是利用position来实现。

position的属性：

1.static 默认值

一般来说不用显示的写这个值，默认的网页文档流是从左至右、从上至下。但是如果出现同一个元素中，那么就要使用到static了。

定义了两个块，两个块的position为relative相对的，这个属性会在后面讲解，如果你只想改变其中一个的位置，那么就要将另一个添加position：static属性。

2.relative 相对于自身位置进行调整。

通过设置top、bottom、left、right进行改变，单位为px像素，但是它之前占有的物理空间还依然保存，不会影响后面的元素。

将div元素设置为relative，通过top、left进行位置调整，设置背景色和边框。

3.absolute 绝对定位

position:absolute相对于 static 定位以外的第一个父元素进行定位。脱离文档流，会悬浮在页面上方，会遮挡住下方的页面内容。

原来位置的空间释放，会对内容多少进行大小调整。

如果一个元素绝对定位后，其参照物是以static以外的第一父元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。

 

将div改成absolute进行绝对定位，他原来的物理空间释放，后面的div单元格将往上移动，当它与其他元素有重叠时，它将悬浮在其他没有设置absolute元素的上方。

  如果你想让底下的单元格压在蓝色单元格上面，那么可以使用z-index 属性设置元素的堆叠顺序,z-index越大优先级越高。

z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

<div class="div1"></div><div class="div2"></div><div class="div3"></div>

.div1{position:absolute;width:200px;height: 200px;top: 200px;left: 300px;z-index: 1;background:#00FFFF;}.div2{position:absolute;width:200px;height: 200px;top: 220px;left: 320px;background: #FF0000;z-index: 3;}.div3{position:absolute;width:200px;height: 200px;top: 250px;left: 350px;z-index: 1;background:#AAAAAA;}

将三个单元格使用z-index值，使用relative不会重叠默认原来的物理空间保持，所以使用absolute，z-index值越大则他的优先级越高，摆放在最高显的位置。

 4.fixed 和absolute一样的，唯一的区别是它永远相对于游览器进行定位。具有破坏性。

  总结：position定位使用方便，简易。熟练地使用position元素能够在很多地方实践到，多多实践，熟能生巧。