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

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

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

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

第一部分position: static

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

如html代码如下

<div class="wrap">

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

</div>

css代码如下

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

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

效果图如下

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

第二部分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是如何移动的，狼蚁网站SEO优化我们看一看移动之后是否会产生其他的影响。

html代码如下

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

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

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

css代码如下

h2.pos_{position:relative;:-35px;}

效果图如下

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

第四部分absolute定位

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

狼蚁网站SEO优化举几个例子

例子1

<title>绝对定位</title>

<style>                body{background:green;}

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

    .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; }

相较于上一个例子，我只修改了class为son的元素的css，设置为positionrelative；效果图如下

于是，我们发现现在span的位置是相对于设有position属性的class为son的父元素的。

例3

.parent{position: absolute; width: 300px;height: 300px;background: #c;}

这个例子我只是修改了第一个例子中的css--设置了position:absolute；效果如下

于是我们发现，现在span的定位是相对于具有position:absolute的属性的class为parent的父元素。

例4

.parent{position:fixed; width: 300px;height: 300px;background: #c;}

相对于例1，我添加了fixed的position属性，发现结果和例3是一模一样的。

例5

.parent{position:static; width: 300px;height: 300px;background: #c;}

相对于例1，我添加了static的position属性（即html的默认属性），结果和例1是一样的。

，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。

第五部分重叠的元素--z-index属性

声明z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理是z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

狼蚁网站SEO优化我们通过几个例子继续来理解这个属性。

例1

　　即son1和son2是parent的两个子元素，效果图如下

这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。

例2

在son1中加入z-index1；可以发现效果如下

也就是说son2的index值是小于1的。

如果我们给son2也加上z-index:1;呢？结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）

例3

在son2中加入z-index:5;可以发现效果如下

即黄色(son2)又在上面了，这个很简单，不作过多讨论。

例4

在父元素添加z-index:10;

在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；

结果如下

结果没有变!!!!! 这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子

例5

把两个子元素的z-index值设置为-5；父元素不设置z-index属性。结果如下

成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。

例6

我们在例5的基础上再给父元素添加一个z-index:10，讲道理~应该也可以得到和例5相同的结果吧！！

.... 看来我们不能设置父元素的z-index值，否则就不能出现我们想要的效果。狼蚁网站SEO优化再看一个有趣的例子!

例7

我们根据例6的经验不设置父元素的值，现在设置son1(蓝色)的z-index为5，son2的z-index为-5，看狼蚁网站SEO优化的结果

即son1在最上面，父元素在中间，son2在最狼蚁网站SEO优化。

对于z-index的探索就这样结束了吗？？没有，看狼蚁网站SEO优化几个更为有趣的例子吧。

例8

代码如下

效果如下

虽然parent1和parent2分别是son1和son2的父元素，按照我们之前的理解，父元素是不可添加z-index值的，否则会导致错误。这里parent1和parent2相对于body又是子元素，他俩是同级的，所以就可以进行比较了。且此时parent1的子元素son1（蓝色）在上。

例9

如果我们在例7的基础上，把parent2的z-index值设为20，就会发现如下效果

即parent2在上的son2也会在上。这也就是所谓的“拼爹”了！！

例10.同样在例7的基础上，我们不设置parent1和parent2和son2的index值，而只设置son1的z-index值为10，效果如下:

即原本在狼蚁网站SEO优化的蓝色son1被提上来了，而没有把父元素（parent1）提上了，诶，不孝顺啊！！

例11.显然，在例10的基础上，如果我们把son2的index值设置的比son1的大，如20，那么son2就会覆盖son1了，并且都在两个父元素只上了！！

效果如下图

例12.，如果我们把两个son的z-index都设置位负数如-5，那么两者就都会被父元素所覆盖

第六部分

这一部分知识还是非常有意思的，希望大家可以继续探索，如果通过这篇博文给予大家一点点的帮助那就再好不过了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

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

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设