HTML CSS Reference/CSS Attributes and Javascript Style Properties/z index

Материал из Web эксперт
Перейти к: навигация, поиск

"z-index" Example

<html>
<body>    
<div id="myDiv" 
     style="position:absolute; 
            left:100px; 
            top:50px; 
            width:100px; 
            height:50px; 
            z-index:1; 
            background-color:red;">
This div is absolute positioned with an z-index of 1.
</div>
<div style="position:absolute; 
            left:100px; 
            top:50px; 
            z-index:12; 
            height:50; 
            background-color:blue;">
This is a div element with a z-index of 12.
</div>
<button onclick="myDiv.style.zIndex = 20;">
Bring red to front
</button>
</body>
</html>



"z-index" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <address>                     |
|                |<applet>                        <b>                           |
|                |<big>                           <blockquote>                  |
|                |<button>                        <caption>                     |
|                |<center>                        <cite>                        |
|                |<code>                          <col>                         |
|                |<colgroup>                      currentStyle                  |
|                |<custom>                        <dd>                          |
|                |defaults                        <dfn>                         |
|                |<dir>                           <div>                         |
|                |<dl>                            <dt>                          |
|                |<em>                            <fieldset>                    |
|                |<form>                          <i>                           |
|                |<iframe>                        <inputtype="button">          |
|                |<input type="checkbox">         <input type="file">           |
|                |<input type="image">            <input type="password">       |
|                |<input type="radio">            <input type="reset">          |
|                |<inputtype="submit">            <input type="text">           |
|                |<isindex>                       <kbd>                         |
|                |<label>                         <legend>                      |
|                |<li>                            <listing>                     |
|                |<marquee>                       <menu>                        |
|                |<ol>                            <p>                           |
|                |<pre>                           runtimeStyle                  |
|                |<s>                             <samp>                        |
|                |<small>                         <span>                        |
|                |<strike>                        <strong>                      |
|                |style                           <sub>                         |
|                |<sup>                           <table>                       |
|                |<tbody>                         <td>                          |
|                |<textarea>                      <tfoot>                       |
|                |<th>                            <thead>                       |
|                |<tr>                            <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"z-index" Possible Values

Possible Values
auto         The default;
integer      An integer value that determines the position of the element in 
             the stacking order.
             
             Elements with a higher z-index value appear on top.



"z-index" Syntax and Note

Note:
How to position elements.
Elements with a higher z-index value appear on top.    

Syntax:
    
element { z-index: value }
elementID.style.zIndex = "value"
document.all.elementID.style.zIndex = "value" // IE only