深入理解css中position属性及z-index属性(推荐)

时间：2017-04-09

在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。

position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。最后将会介绍和position属性密切相关的z-index属性。

第一部分：position: static

static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。

如html代码如下：

<div class="wrap">

    <div class="content"></div>

</div>

css代码如下：

.wrap{width: 300px;height: 300px; background: red;}

.content{position: static; top:100px; width: 100px;height: 100px; background: blue;}

效果图如下：

我们发现，虽然设置了static以及top，但是元素仍然出现在正常的流中。

第二部分：fixed定位

fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

html代码如下：

<div class="content">我是使用fix来定位的！！！所以我相对于浏览器窗口，一直不动。</div>

css代码如下：

body{height:1500px; background: green; font-size: 30px; color:white;}

.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

效果图如下：

即右下角的div永远不会动，就像经常弹出来的广告！！！

值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支持。

第三部分：relative定位

相对定位元素的定位是相对它自己的正常位置的定位。

关键：如何理解其自身的坐标呢？

让我们看这样一个例子，hmtl如下：

<h2>这是位于正常位置的标题</h2>

<h2 class="pos_bottom">这个标题相对于其正常位置向下移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

css代码如下：

.pos_bottom{position:relative; bottom:-20px;}

.pos_right{position:relative;left:50px;}

效果图如下：

即bottom:-20px;；向下移动。 left:50px;向右移动。

即可以理解为：移动后是移动前的负的位置。

比如上例中，移动后是移动前负的bottom:-20px;即移动后是移动前bottom:20px;也就是说，移动后是移动前的向下20px；

又如：left:50px;移动后是移动前左边的-50px;那么也就是说移动后是移动前的右边的50px。

即：移动后对于移动前：如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。

弄清楚了relative是如何移动的，下面我们看一看移动之后是否会产生其他的影响。

html代码如下：

<h2>这是一个没有定位的标题</h2>

<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>

<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

css代码如下：

h2.pos_top{position:relative;top:-35px;}

效果图如下：

根据之前的说法，top:-35px；值是负数，则直接换成正数，即移动后相对与移动前向上偏移了35px；我们发现于上，移动后和上面的元素发生了重叠；于下，即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响。

第四部分：absolute定位

绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

下面举几个例子：

例子1：

<title>绝对定位</title>

<style>                body{background:green;}

    .parent{ width: 500px;height: 500px;background: #ccc;}

    .son{ width: 300px;height: 300px;background: #aaa;}

    span{position: absolute; right: 30px; background: #888;}

</style>
<div class="parent">

    <div class="son">

        <span>什么？</span>

    </div>

</div>

效果如下：

即我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。

例2:

.son{position: relative; width: 100px;height: 100px;background: #aaa; }

共3页:

上一篇1/3

上一篇：使用CSS3实现一个3D相册效果实例 下一篇：详解CSS中zoom属性或overflow:auto属性清除浮动的作用

深入理解css中position属性及z-index属性(推荐)

相关文章

最新文章