CSS中实现定位布局有哪些技巧，有什么重要知识点-群英

上一篇：CSS3中不定高宽时怎么实现垂直水平居中下一篇：CSS中display属性的定义是什么，属性值inline-block如何用

关于“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