z-index

[YanaSt]

Здравствуйте!

Изучаю верстку, пытаюсь по-тихонечку сверстать первый сайт.

Контент должен умещаться по ширине в 1000px, в центре экрана.

Есть два дива, мне нужно, чтобы они были на верху. Позиционирую их с помощью z-index (float не работает, т.к. общая ширина двух элементов больше 1000px).

Возникла такая проблемка: если ставлю position:absolute, то все ок. Но, мне нужно, чтобы они были наверху не экрана, а верхней границы таблицы (внутри которой они находятся). Тогда ставлю position:relative. И ничего не получается. Помогите, пожалуйста, поставить их на место

<center>

<table border="3" width="1000">
  <tr>
    <td>

     <div id="right">
      <img src="images/logo.png" />      
    </div>

    <div  id="left">
      <img id="ecology" src="images/ecology.png" />
    </div>

    </td>
  <tr/>
 </table>

</center>

#left{
position: relative;
top: 0;
z-index:2;
}



#right{
position: relative;
z-index: 1;
}

[Int]

Я внутрь блока с relative втыкаю блок с absolute

[YanaSt]

Int, можете код показать? Не соображу, как это реализовать...

[Zippovich]

CSS:

.rel-block {position: relative}
.abs-block {position: absolute; top: 0; right: 0}

HTML:

<div class="rel-block">
<div class="abs-block"></div>
</div>

блок .abs-block - позиционируется в данном случае относительно .rel-block.

Однако с таблицами это может не работать - сделайте блок в какой-то ячейке таблицы (div) и позиционируйте относительно его.

Edited June 12, 2009 by Zippovich

[YanaSt]

Zippovich, спасибо! Пойду пробовать.

[AMD]

<div id="container">
<div id="header">
<h2>Султанов Денис<a href="#" title="Султанов Денис"></a></h2>
</div>
</div>

#container{
	float: right;
	width: auto;
	height: auto;
}

#header{
	width: 100%;
	min-height:160px;
	height:auto !important;
	height: 160px;
	display: block;
}

#header h2{
	font:normal 80%/90% Georgia, serif;
	color:#9c9c9c;
	position: relative;
	width: 255px;
	height: 125px;
	overflow: hidden;
	margin: 0 25px 0 0;
	padding: 0;
	text-transform: inherit;
	text-indent: inherit;
}

#header h2 a{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
	background-image: url('logo.jpg');
	background-repeat: no-repeat;
	background-position: right center;
}

Как пример, в relative absolute.