позиционированный слой не выходит поверхдругих

sc@r@bey · August 14, 2009

подскажите, как сделать, чтоб позиционированный слой отображался поверх всех слоев, а то у меня только в родительском

нужно, чтоб контейнер menu отобрражался поверх header navigation и panel

html

<?php
	session_start();
	include "include/configuration.php";
	include "include/function.php";
?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="shortcut icon" href="media/favicon.ico" />
<title><?php echo heading().$title; ?></title>
<link rel="stylesheet" type="text/css" href="css/css.css" />

</head>
<body>
	<!-- Основной контейнер -->
	<div id="container">

		<!-- Верхушка -->
		<div id="top">
			г. Новороссийск
		</div>

		<!-- Шапка -->
		<div id="header">
			<a href="index.php"><img src="media/logo.jpg" width="274" height="60" border="0" alt="web-студия NetSurfing"/></a>
			<div id="menu">
				<?php include('include/menu.php'); ?>
			</div>
		</div>

		<!-- Навигация -->
		<div id="navigation">

		</div>

		<!-- Панель -->
		<div id="panel"></div>

		<!-- Правая панель -->
		<div id="sidebar-right">
fgsdfgsdfgsdfg
		</div>

		<!-- Левая панель - отсутствует -->
		<div id="sidebar-left"></div>

		<!-- Контент -->
		<div id="content">


				<div class="Article">
		<h2>Article header</h2>

		<div class="ArticleBody">
		<p>
		A few paragraphs of article text.<br />
		A few paragraphs of article text.
		</p>

		<p>
		A few paragraphs of article text.<br />
		A few paragraphs of article text.
		</p>
		</div>

		<div class="ArticleFooter">
		<p>
		A paragraph containing author information.
		</p>
		</div>
	</div>


		</div>

		<!-- Подвал -->
		<div id="footer">
			<?php include('include/menu.php'); ?>
		</div>

		<!-- Основание -->
		<div id="bottom">
			<?php include('include/footer.php'); ?>
		</div>


	</div>
</body>
</html>

css

/* Основные настройки */
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, sans-serif;
	font-size: small;
	color: #000;
	background-color: #c7cdcf;
}

/* Основной контейнер */
#container {
	margin: 0px auto;
	padding: 0px;
	width: 1002px;
	background-image: url(../media/bg.jpg);
	background-repeat: repeat;
	overflow: hidden;
}

/* Верхушка */
#top {
	padding : 0px;
	margin: 0px;
	width: 100%;
	font-size: 80%;
	text-align: right;
	line-height: 20px;
	height: 20px;
	color: #ffffff;
	background-color: #545454;
	overflow: hidden;
}	

/* Шапка */
#header {
	position: relative;
	z-index: 50;
	padding : 0px;
	margin: 0px;
	width: 100%;
	background-color: #272f34;
	overflow: hidden;
}
#header img {
	padding: 30px;
}

/* Навигация */
#navigation {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 20px;
	overflow: hidden;
}
#menu {
position: absolute;
top: 100px;
left: 66px;
z-index: 100;
	text-align: center;
	background-image: url(../media/menu.gif);
	width: 869px;
	height: 66px;
	background-position: center;
	background-repeat: no-repeat;	
}
#menu a {
	font-size: 120%;
	text-decoration: none;
	color: #ffffff;
}
#menu a:hover {
	text-decoration: underline;
}

/* Панель */
#panel {
	margin: 0px;
	padding: 0px;
	width: 100%;
   height: 199px;
	background-image: url(../media/orange.jpg);
	background-repeat: no-repeat;
	overflow: hidden;
}

/*Правая панель*/
#sidebar-right {
	float: right;
	width: 250px; 
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

/*Левая панель - отсутствует*/
#sidebar-left {
	float: left;
	width: 0px; 
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

/* Контент */
#content {
	margin: 0px;
	padding: 0px;
	height: 1%; /* IE6 hack... it's very minor, though */
	overflow: hidden;
}

#content-inner {
	width: 100%;
	padding: 10px 10px 22px 10px;
	overflow: hidden;
}
.Article {
	margin: 10px 10px 22px 10px;
}
div.Article {
  background:  url("../media/custom_corners_topleft.gif") top left no-repeat;
  width:90%;
  } 
  div.ArticleTwo {
  background:  url("../media/custom_corners_topleft.gif") top left no-repeat;
  width:50%;
  } 
div.Article h2 {
  background:  url("../media/custom_corners_topright.gif") top right no-repeat;
  font-size:1.3em;
  padding:15px;
  padding-left:0;
  margin:0;
  position:relative;
  right:-14px;
  }
div.ArticleBody {
  background:  url("../media/custom_corners_right.gif") top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  padding-left:0;
  position:relative;
  right:-14px;
  }
div.ArticleFooter {
  background:  url("../media/custom_corners_bottomleft.gif") bottom left no-repeat;
  position:relative;
  top:11px;

  }
div.ArticleFooter p {
  background:  url("../media/custom_corners_bottomright.gif") bottom right no-repeat;
  padding:15px;
  padding-left:0;
  display:block;
  margin:-2em 0 0 0;
  position:relative;
  right:-14px;
  }

/* Подвал */	
#footer {
	clear: both;
	margin: 0px;
	padding: 0px;
   font-size: 90%;
	width: 100%;
	text-align: center;
	line-height: 40px;
	height: 40px;
	color: #9b9b99;
	background-color: #545454;
	overflow: hidden;
}
#footer a {
	text-decoration: none;
	color: #ffffff;
}
#footer a:hover {
	text-decoration: underline;
}

/* Основание */	
#bottom {
	margin: 0px;
	padding: 0px;
	width: 100%;
	font-size: 80%;
	line-height: 50px;
	height: 50px;
	color: #fff;
	background-color: #272f34;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

проблему решил позиционировав отностиельно container !!!! я молодец

Edited August 14, 2009 by sc@r@bey

Sign In

позиционированный слой не выходит поверхдругих

Question

sc@r@bey

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information