Posted By

Masis on 05/10/10


Tagged

css z-index


Versions (?)

CSS. z-index


 / Published in: CSS
 

URL: http://phpforms.net/tutorial/tutorial.html

Any positioned elements on a web page can be superposed each other in a certain order. Thus they are simulating the third measurement that is perpendicular to the screen. Each element can be both below and above placing other objects on a z-axis. The attribute z-index operates here.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  5. <title>z-index</title>
  6. <style type="text/css">
  7. #layer1, #layer2, #layer3, #layer4 {
  8. position: relative; /* Relative positioning */
  9. }
  10. #layer1, #layer3 {
  11. font-size: 50px; /* Font size in pixels */
  12. color: #000080; /* Blue text color */
  13. }
  14. #layer2, #layer4 {
  15. top: -55px; /* Top text shift */
  16. left: 5px; /* Shift text to the right */
  17. color: #ffa500; /* Orange text color */
  18. font-size:70px; /* Font size in pixels */
  19. }
  20. #layer1 { z-index: 2; }
  21. #layer2 { z-index: 1; }
  22. #layer3 { z-index: 3; }
  23. #layer4 { z-index: 4; }
  24. </style>
  25. </head>
  26. <body>
  27. <p>Layer 1 above</p>
  28. <div id="layer1">Layer 1</div>
  29. <div id="layer2">Layer 2</div>
  30. <p>Layer 4 above</p>
  31. <div id="layer3">Layer 3</div>
  32. <div id="layer4">Layer 4</div>
  33. </body>
  34. </html>

Report this snippet  

You need to login to post a comment.