Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Zastosowanie z-index: x;
Forum PHP.pl > Forum > Przedszkole
bercow
26.02.2011, 16:20:16
Witam.

Staram sie wypozycjonowac elementy za pomoca z-index: x;, ale nie reaguja one tak jak powiny, jezeli dobrze rozumiem, z-index: x; dziala tak, ze element ktory ma wyzsza wartosc x bedzie zawsze zakrywal ten z nizsza wartoscia x.

A wiec mamy kod jak nizej, chcial bym aby element "#logowe" przykrywal "#left" oraz "#right", ale nie przykrywal "#logo". W takim ukladzie jak ponizej "#logowe" jest na samym dole, jezeli zmienie mu wartosc z -2, na x=>0, powienien byc w srodeczku, ale wtedy staje sie pierwszym elementem.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  4. 	<head>
  5. 		<title>Anty Babilon</title>
  6. 		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  7. 		<link rel="stylesheet" type="text/css" href="style.css" />
  8. 	</head>
  9. <body>
  10. <div id="logowe">333
  11. </div>
  12. <div id="site">
  13. <div id="left">
  14. </div>
  15. <div id="box">
  16. <div id="logo">1
  17. </div>
  18. <div id="tresc">5555555555555
  19. </div>
  20. </div>
  21. <div id="right">
  22. </div>
  23. </div>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. 		body {
  2. 		background-color: #000000;
  3. 		}
  4. 	#site {
  5. 		width: 1080px;	
  6. 		height: 1307px;
  7. 		margin: 0 auto;
  8. 		margin-top: -10px;
  9. 	}
  10. 	#box {
  11. 		width: 998px;	
  12. 		height: 1307px;
  13. 		margin: 0 auto;
  14. 		float :left;
  15. 	}
  16. 	#left {
  17. 		background-image: url("img/left.png");
  18. 		width: 40px;	
  19. 		height: 1307px;
  20. 		float :left;
  21. 		margin-top: -1px;
  22. 		z-index: 1;
  23. 	}
  24. 	#right {
  25. 		background-image: url("img/right.png");
  26. 		width: 40px;	
  27. 		height: 1307px;
  28. 		float :left;
  29. 		z-index: 1;
  30. 	}
  31. 	#logo {
  32. 		background-image: url("img/logo.png");
  33. 		width: 998px;	
  34. 		height: 349px;
  35. 		z-index: 3;
  36. 	}
  37. 	#tresc {
  38. 		background-image: url("img/tlo.png");
  39. 		width: 998px;	
  40. 		height: 957px;
  41. 	}
  42. 	#logowe {
  43. 		background-image: url("img/logowe.png");
  44. 		height: 117px;
  45. 		width: 99%;
  46. 		position:absolute;
  47. 		top: 160px;
  48. 		z-index: -2;
  49. 	}
  50.  
[PHP] pobierz, plaintext
everth
26.02.2011, 16:37:42
Zapoznałeś się z definicją z-index?

Mały tip:
Cytat
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.