Z-index Positioning : z index « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. z index

Z-index Positioning

  

<?xml version="1.0" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Z-index Positioning</title>
<style type='text/css'>
p {
  width:200px;
  background-color:#ffffff;
  padding:5px; margin:10px;
  border-style:solid; border-color:#000000; border-width:2px;}

p.one {
   z-index:3;
   position:absolute;
   left:0px; top:0px;}

p.two {
  z-index:1;
  position:absolute; 
  left:150px;  top: 25px;}

p.three {
   z-index:2;
   position:absolute;
   left:40px; top:35px;}
</style>

</head>


<body>
<div class="page">
  <p class="one">Here is paragraph <b>one</b>. This will be at the top of the page.</p>
<p class="two">Here is paragraph <b>two</b>. This will be underneath the other elements.</p>
  <p class="three">Here is paragraph <b>three</b>. This will be at the bottom of the page.</p>
</div>

</body>

</html>








Related examples in the same category

1.'z-index' Example
2.z-index number
3.z-index settings
4.z-index: auto
5.z-index: child index
6.The z-index property controls how elements are layered along an invisible z-axis.
7.You can control the z-index explicitly, however, by providing an integer value to the z-index property.
8.Nested elements handle the z-index property differently. Descendant elements must always have a z-index higher than that of their parent.
9.opacity and z-index
10.z-index among li items
11.Inline style for z-index
12.z-index controls the stacking order of positioned elements.
13.A negative value places element below the normal flow, and a positive value places them above the flow.
14.Use z-index to change the overlap index
15.Set z-index to 100
16.The default value for z-index is auto.
17.z index, child index
18.Larger values move them closer to the user in the stacking order.
19.Stacking with z-index
20.z-index value
21.three layers of div tags
22.z-index and sibling selector
23.z-index and child selector