在前端开发中，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绝对定位技巧展开，提供了一些常见布局需求的实现方法，在现实工作中也可以结合实际情况，灵活运用。