Проблем с z-index

  • Автор Автор lqbo
  • Начална дата Начална дата
L

lqbo

Registered
Здравйете искам да ви помоля д ами помогнете вижте теЗи два файла:


index.html

Код: 
<html>

	<head>
	<link type="text/css" rel="stylesheet" href="bad.css">
	</head>
	
<body>

<center>
<div class="kazana">

<img class="onova" src="http://prikachi.com/files/1002359x.gif">

<img id="banner" src="http://www.prikachi.com/files/1002447i.gif">





</div>
</center>

</body>

	</html>



bad.css

Код: 
html,body {background-color: #f2f2f0; padding: 0px; margin: 0px;}

.onova{z-index: 1;}

#banner{z-index: 3; float: left; margin-top: -111px;}


Може ли да ми кажете като използвам z-index защо те пак не се променят...... искам баннера да е отгоре а не от долу...


+1 за първият който ми помогне....
 
Код: 
 <html>

   <head>
   <link type="text/css" rel="stylesheet" href="bad.css">
   </head>
   
<body>

<center>
<div>
<img id="banner" src="http://www.prikachi.com/files/1002447i.gif">
</div><br>
<div>
<img class="onova" src="http://prikachi.com/files/1002359x.gif">
</div>
</center>

</body>

   </html>


Код: 
.banner{z-index: 3; float: left; margin-top: -111px;}

html,body {background-color: #f2f2f0; padding: 0px; margin: 0px;}

.onova{z-index: 1;}


:roll:
 
Ами да ти кажа по-принцип z-index се ползва когато се задава position и за да се знае кой слой да е най-отгоре се задава вече z-index.Aко питаш мен го направи така:

html,body {background-color: #f2f2f0; padding: 0px; margin: 0px;}

.kazan { position:relative;}
#banner{z-index: 3; position:absolute; left:0px; top:0px;}

.onova{z-index: 1; position:absolute; left:0px; top:0px}


Така , малко разяснение.

1. Винаги почвай с html , body
2. Задаваме на казан positon:relative; за да се знае ,че елементите в него, както сме направили с абсолют са деца на тоя елемент и да не бягат където им падне, а се позиционират спрямо relative елемента.
3.Задаваме position:absolute; и z-index, като по-големи z-index е отгоре.

Вече си ги намести от лефт и топ.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе