在前端开发中，CSS是我们最为熟悉的技术之一。在许多布局中，我们都需要用到绝对定位技巧。这是因为绝对定位可以让我们的元素在一个固定的位置上，无论其他元素怎样改变位置，我们的元素都会保持不变。那么今天，我们就来一起掌握如何使用CSS绝对定位技巧，达到更好的布局效果。

　　一、Absolute的使用

　　Absolute是CSS中最常用的定位值之一， 它可以让元素脱离文档流，达到特定的定位效果。我们将一个元素使用position:absolute来定义定位，然后再用top、bottom、left、right这些属性来指定它所处的位置信息。

　　这里还需要说一个概念，就是父元素的定位方式，这在绝对定位的时候非常重要。举个例子，我们有一个元素，要想让它相对于整个页面居中，我们可以先做一个容器，这个容器需要定位方式为relative，而我们的居中元素的定位方式为absolute。

　　二、Absolute的定位方式

　　接下来我们将讲解几个常见的使用绝对定位技巧实现的布局效果，帮助你掌握这个绝对定位技巧。

　　1.水平居中

　　经常有这样的需求：将一个元素水平居中。怎么做呢？其实很简单，我们只需要将元素定位到左上角，同时将左右两个方向都设置为0，就可以实现水平居中。

　　```css

　　div{

　　 width:100px;

　　 height:100px;

　　 position:absolute;

　　 left:0;

　　 right:0;

　　 margin:auto;

　　}

　　```

　　这样就可以实现水平居中了，当然也可以将上下两个方向都设置为0，实现垂直居中。

　　2.固定定位

　　有时候我们需要在页面中铺满一个背景色，并且它不随滚动滑动而改变位置，那么怎么做呢？

　　我们将背景色元素定位为fixed，然后将左上角和右下角都设置为0，就可以让它一直铺满整个页面，不管怎样滚动都不会改变位置。

　　```css

　　div{

　　 width:100%;

　　 height:100%;

　　 position:fixed;

　　 top:0;

　　 left:0;

　　 right:0;

　　 bottom:0;

　　 background-color: green;

　　}

　　```

　　3.预设定位

　　有时候我们需要让一个元素相对于另一个元素进行预设定位，怎么做？我们将预设定位的元素父元素设置为relative，保证它可以相对于它的父元素进行定位。接下来我们可以通过为它设置top、right、bottom、left来控制它的位置。

　　```css

　　.parent{

　　 position:relative;

　　}

　　.child{

　　 position:absolute;

　　 top:0;

　　 left:0;

　　}

　　```

　　这样我们就可以让它相对于父元素进行预设定位了，从而达到我们想要的效果。

　　4.大小不定元素绝对居中

　　有时候，我们需要将一个大小不固定的元素进行绝对居中，怎么做呢？

　　这里我们可以借助CSS3的transform来实现。我们将这个元素定位为absolute，然后将left和top设置为50%。接下来我们需要以这个元素的中心为原点，对它进行平移，使用CSS3的transform实现即可。

　　```css

　　.midd{

　　 position:absolute;

　　 left:50%;

　　 top:50%;

　　 transform:translate(-50%,-50%);

　　}

　　```

　　这样我们就可以轻松的实现大小不定元素的绝对居中了。

　　5.z-index管理

　　有时候我们希望某一个元素处于所有其他元素的上面，而又不希望它在浮动元素的后面，怎么做呢？

　　我们可以使用z-index属性，这个属性用于控制元素在垂直方向上的显示级别，z-index较大的元素会排在较小的元素的前面。

　　```css

　　.upper{

　　 position:absolute;

　　 z-index:10;

　　}

　　.bottom{

　　 position:absolute;

　　 z-index:1;

　　}

　　```

　　上面的例子中，upper元素的z-index为10，而bottom元素的z-index为1，那么在垂直方向中，upper元素就会出现在bottom元素的前面。

　　三、总结

　　本文主要是围绕CSS绝对定位技巧展开，提供了一些常见布局需求的实现方法，在现实工作中也可以结合实际情况，灵活运用。