CSS之定位布局（position，定位布局技巧）

css之定位

本人博客：查看文章

1.什么是定位：

css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))经过定位属性能够设置一些不规则的布局，使用TLBR(top,left,bottom,right)来调整元素位置。

2.各个属性值的描述：

• static(静态) 没有特别的设定，遵循基本的定位规定，不能经过z-index进行层次分级，在普通流中，各个元素默认的属性。
• relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置经过 top,bottom,left,right 定位。
• absolute(绝对定位) 脱离文档流，经过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，若是对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
• fixed（固定定位） 这里所固定的参照对像是可视窗口而并不是是body或是父级元素。使用了fixed的元素不会随着窗口的滚动而滚动。属于absolute的子集。

3.各个属性值的具体做用：

A.static：（静态，默认的属性）一般状况下都不会使用，可是会存在有些场景，就是你想把position的值从其余值修改为默认时使用。

B.relative：（相对定位）一个元素设定了position:relative，由于其不脱离文本流，若是不设置TLBR(top,left,bottom,right)的话，它的位置不会被改变，且不会影响当前布局，至关于没事发生同样。若是设置了TLBR后，元素就能够向指定的方向偏移，可是他原有的位置仍是占据着的，例子如图：

图一：对child-1 设置了position：relative

图二：再对child-1 调位置 top：20px left：20px

C.absolute: (绝对定位)，彻底脱离文本流（普通流），原来的位置再也不占有，且能够设置TLBR任意移动；

特别说明一下，对元素设置了absolute后，其父级元素都没有设置position：absolute/relative/fixed其会以body为父级。

图一：

图二：

图三：

 

D.fixed：(固定定位),不会随着页面滚动而滚动，这里就不贴图了，最形象的就是那些网页小广告，你滚动页面，可是它一直在网页的右边或左边，死跟着你。

 

 

4.定位布局技巧：position：relative 与 position：absolute 结合使用:

上面提到若是对元素设置了absolute后，其父级元素都没有设置position：relative，其会以body为父级。这样的话咱们该元素定位到咱们的目标位置将很困难，量像素麻烦。图片说明：

图一：初始状态

图二：对box-chd-chd设置position：absolute 并设置 top：0， left:0 能够看到它从body做为父级，会以最左上角做为起点

图三：对box 设置position：relative，能够看到此时box-chd-chd以box做为父级

图四：再对box-chd 设置position：relative，能够看到box-chd-chd以box-chd做为父级

 

能够看出，当子代设置了position：absolute后，其父级那个设置了position：relative，这个子代就会从该父级元素最左上方做为起点移动，而且遵循 就近原则，即子代向上找父级，当找到第一个有父级设置了relative就以它最左上方做为起点。

relative 与 absolute 结合的方式，对定位布局起到了便利，须要移动的距离也获得缩小，不用从body开始整个页面来量取像素，同时也方便管理，结构清晰。

 

总结：上一篇写了float的布局技巧，这章是position，能够看出position与float都是一种布局方式，且各有各的应用场景，能够根据需求来选择布局方式。

做者：Ry-yuan

如需转载请标明出处，原文地址： http://www.cnblogs.com/Ry-yuan/p/6822619.html