z-index

  • Revision slug: CSS/z-index
  • Revision title: z-index
  • Revision id: 184459
  • Created:
  • Creator: Luis Henrique Sousa
  • Is current revision? Não
  • コメント New page: <breadcrumbs></breadcrumbs> __NOTOC__ {{CSSRef}} == Resumo == A propriedade <code>z-index</code> especifica a ordem-z de um elemento e de seus herdeiros. Quando os elementos sobrepõem, a...

Revision Content

{{template.CSSRef()}}

Resumo

A propriedade z-index especifica a ordem-z de um elemento e de seus herdeiros. Quando os elementos sobrepõem, a z-ordem determina qual elemento cobre o outro.

  • Valor inicial: auto;
  • Aplica-se a: elementos posicionados;
  • Herdado: não;
  • Media: Visual;
  • Valor computado: como especificado.

Sintaxe

z-index: auto | <integer> | inherit

Valores

auto 
The element is drawn at the same z-order as an element with z-index: 0. It does not create a new stacking context.
<integer> 
The element is drawn at the z-order given. It also creates a new stacking context, which means that all of its descendants also draw at that z-index. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

Exemplos

Notas

Negative z-index values are supported correctly starting in Gecko 1.9 / Firefox 3. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.

Especificações

Browser compatibilidade

Veja também

{{template.Cssxref("position")}}

{{ wiki.languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Resumo"> Resumo </h3>
<p>A propriedade <code>z-index</code> especifica a ordem-z de um elemento e de seus herdeiros. Quando os elementos sobrepõem, a z-ordem determina qual elemento cobre o outro.
</p>
<ul><li> Valor inicial: auto;
</li><li> Aplica-se a: elementos posicionados;
</li><li> Herdado: não;
</li><li> Media: <a href="pt/CSS/Media/Visual">Visual</a>;
</li><li> Valor computado: como especificado.
</li></ul>
<h3 name="Sintaxe"> Sintaxe </h3>
<p>z-index: auto | &lt;integer&gt; | <a href="pt/CSS/inherit">inherit</a>
</p>
<h3 name="Valores"> Valores </h3>
<dl><dt> auto </dt><dd> The element is drawn at the same z-order as an element with <code>z-index: 0</code>.  It does <i>not</i> create a new stacking context.
</dd><dt> &lt;integer&gt; </dt><dd> The element is drawn at the z-order given.  It also creates a new stacking context, which means that all of its descendants also draw at that z-index.  This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.
</dd></dl>
<h3 name="Exemplos"> Exemplos </h3>
<h3 name="Notas"> Notas </h3>
<p>Negative <code>z-index</code> values are supported correctly starting in <a href="pt/Gecko">Gecko</a> 1.9 / <a href="pt/Firefox_3">Firefox 3</a>. Previous versions implemented the CSS 2 behavior, not the CSS 2.1 behavior that is compatible with other browsers.
</p>
<h3 name="Especifica.C3.A7.C3.B5es"> Especificações </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibilidade"> Browser compatibilidade </h3>
<h3 name="Veja_tamb.C3.A9m"> Veja também </h3>
<p>{{template.Cssxref("position")}}
</p>{{ wiki.languages( { "en": "en/CSS/z-index", "fr": "fr/CSS/z-index", "pl": "pl/CSS/z-index" } ) }}
Revert to this revision