Detaillierte grafische Erläuterung des Positionsattributs und des Z-Index-Attributs von CSS

这次给大家带来css的position属性及z-index属性图文详解，使用position属性及z-index属性的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

第一部分：position: static

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

如html代码如下：

<p class="wrap">
    <p class="content"></p>
</p>

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代码如下：

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

css代码如下：

body{height:1500px; background: green; font-size: 30px; color:white;}
.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;}

效果图如下：

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

值得注意的是：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定位

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

下面举几个例子：

例子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>
<p class="parent">
    <p class="son">
        <span>什么？</span>
    </p>
</p>

效果如下：

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

例2:

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

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

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

例3：

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

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

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

例4：

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

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

例5：

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

相对于例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),值大的元素发生重叠时会在值小的元素上面。

下面我们通过几个例子继续来理解这个属性。

例1：

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

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

例2：

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

也就是说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属性。结果如下：

Erfolg! ! Es zeigt, dass weiterhin Vergleiche zwischen übergeordneten Elementen und untergeordneten Elementen durchgeführt werden können! ! ! Wir müssen lediglich den Z-Index-Wert des untergeordneten Elements auf eine negative Zahl setzen.

Beispiel 6:

Basierend auf Beispiel 5 fügen wir einen Z-Index: 10 zum übergeordneten Element hinzu. Logischerweise sollten wir in der Lage sein, das gleiche Ergebnis wie in Beispiel 5 zu erhalten! !

Allerdings.... Es scheint, dass wir den Z-Index-Wert des übergeordneten Elements nicht festlegen können, da sonst der gewünschte Effekt nicht angezeigt wird. Schauen wir uns ein weiteres interessantes Beispiel an!

Beispiel 7:

Basierend auf der Erfahrung von Beispiel 6 legen wir den Wert des übergeordneten Elements nicht fest und legen jetzt den Z-Index von son1 fest (blau) auf 5. Der Z-Index von son2 ist -5. Sehen Sie sich das folgende Ergebnis an:

Das heißt, son1 steht oben, das übergeordnete Element ist in der Mitte und son2 ist unten.

Ist dies das Ende der Erforschung des Z-Index? ? Natürlich nicht, schauen wir uns unten einige weitere interessante Beispiele an.

Beispiel 8:

Der Code lautet wie folgt:

Der Effekt ist wie folgt:

Obwohl parent1 und parent2 die übergeordneten Elemente von son1 bzw. son2 sind, kann der Z-Index-Wert nach unserem bisherigen Verständnis nicht zum übergeordneten Element hinzugefügt werden, da sonst ein Fehler auftritt. Aber hier sind parent1 und parent2 relativ zum Körper untergeordnete Elemente. Sie befinden sich auf derselben Ebene und können daher verglichen werden. Und zu diesem Zeitpunkt befindet sich das untergeordnete Element son1 (blau) von parent1 oben.

Beispiel 9:

Wenn wir den Z-Index-Wert von parent2 basierend auf Beispiel 7 auf 20 setzen, werden wir den folgenden Effekt feststellen:

Das heißt, wenn Eltern2 oben ist, ist auch Sohn2 gleichzeitig oben. Das ist der sogenannte „Kampf um Papa“! !

Beispiel 10. Basierend auf Beispiel 7 legen wir nicht die Indexwerte von parent1, parent2 und son2 fest, sondern nur den Z-Indexwert von son1 auf 10. Der Effekt ist wie folgt:

Das heißt, der blaue Sohn1, der ursprünglich unten war, wurde angezeigt, aber das übergeordnete Element (Eltern1) wurde nicht angezeigt. Hey, es ist unfilial! !

Beispiel 11. Wenn wir basierend auf Beispiel 10 den Indexwert von Sohn2 größer als den von Sohn1 festlegen, z. B. 20, deckt Sohn2 offensichtlich Sohn1 ab und beide befinden sich in den beiden Elternteilen Elemente. Nur an! !

Der Effekt ist wie folgt:

Beispiel 12. Natürlich, wenn wir den Z-Index beider Söhne auf eine negative Zahl setzen, wie zum Beispiel - 5, dann werden beide vom übergeordneten Element abgedeckt:

Teil 6: Zusammenfassung

Dies Teil des Wissens Es ist immer noch sehr interessant und ich hoffe, dass Sie es weiter erforschen können. Natürlich wäre es großartig, wenn ich Ihnen durch diesen Blog-Beitrag ein wenig helfen könnte!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung häufig verwendeter Farbverlaufsmethoden

So entfernen Sie den unscharfen weißen Rand in CSS3

Drei Möglichkeiten, absolut positionierte Elemente horizontal und vertikal zu zentrieren

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erläuterung des Positionsattributs und des Z-Index-Attributs von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!