---
title: "z-index"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/183763-z-index"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mikaelsooh"
published: "2010-06-10T10:33:39.000Z"
updated: "2010-06-10T14:12:34.000Z"
replies: 5
views: 497
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/183763-z-index"
---

# z-index

## #1 — mikaelsooh, 2010-06-10T10:33Z

Jo... 

Jag sitter och bygger en sajt till joomla. Problemet är att min meny vägrar hamna ovanför innehållet. Har ändrat Z-index på alla menyelement till ett högre än alla innehåll. Men fortfarande vägrar menyn hamna över.

Någon som har en aning om vad jag kan ha missat?

Permalänk: https://www.webforum.nu/p/183763

## #2 — Danne V, 2010-06-10T11:08Z

z-index kan väl bara köras på absolut positionerade divvar tror jag? Har du det?

Permalänk: https://www.webforum.nu/p/2239904

## #3 — mikaelsooh, 2010-06-10T11:22Z

Det är nog det jag missat i sådana fall. I så fall är det ju intressant att veta hur fasen jag ska få meny att ligga ovanför. Det går nämligen inte att köra absoluta divar i detta fall.

Permalänk: https://www.webforum.nu/p/2239909

## #4 — voigtann1, 2010-06-10T11:34Z

kör relative då, fungera det också.

Permalänk: https://www.webforum.nu/p/2239912

## #5 — mikaelsooh, 2010-06-10T13:32Z

Ska testa.

Permalänk: https://www.webforum.nu/p/2239931

## #6 — mikaelsooh, 2010-06-10T14:12Z

> **[mikaelsooh skrev:](https://www.webforum.nu/p/1507168)**
>
> Ska testa.

Funkade inte  :(

Bifogar koder. 

1\. Sidstrukturen:

```
* { 
	z-index: 2; 
	padding: 0; 
	margin: 0; 
}

img { 
	z-index: 2; 
	border: 0; }
body { 
	color: black; 
	line-height: 1.3em; 
	font-size: 13px; 
	font-family: verdana, arial; 
	background-color: silver; 
	z-index: 2; 
	overflow: none; }
a:link, a:visited { 
	font-weight: normal; 
	color: #000; 
	text-decoration: none; 
	outline: none medium; 
	text-align: left; 
	z-index: 2; }
.float { 
	z-index: 2; } 
.clear { 
	z-index: 2; } 
.overall { 
	background-color: #fff; z-index: 1; }
div.center { 
	text-align: center; 
	margin: 0 auto; 
	padding: 0; 
	width: 950px; 
	background: #ffffff; 
	z-index: 2; }
#container { 
	background-color: white; 
	align: left; 
	width:1000px; 
	text-align: left; 
	height: 680px; 
	z-index: 1; 
	overflow: none; 
	float: none; 
	margin-right: auto; 
	margin-left: auto; 
	border-style: none; }
#header { 
	background-image: url(../img/header2.png); 
	background-repeat: no-repeat; 
	text-align: center; 
	position: relative; 
	left: 20px; 
	width: 400px; 
	height: 45px; 
	z-index: 11; 
	float: left; 
	margin-top: 20px; }
#menu { 
	color: black; 
	text-align: center; 
	position: relative; 
	top: 33px; 
	right: 45px; 
	width: 500px; 
	z-index: 2; 
	float: right; 
	margin: 0; 
	padding: 0; }
#content { 
	color: white; 
	width: 690px; 
	text-align: left; 
	height: 480px; 
	z-index: 0; 
	overflow: hidden; 
	float: left; 
	margin-right: 10px; 
	margin-bottom: 50px; 
	margin-left: 40px; 
	padding: 10px; }
#right { 
	background-color: #d6d6d6; 
	text-align: left; 
	position: relative; 
	width: 205px; 
	height: 480px; 
	z-index: 0; 
	overflow: auto; 
	float: left; 
	padding: 10px; }
#footer { 
	color: black; 
	background-image: none; 
	text-align:center; 
	position: relative; 
	bottom: 10px; 
	width: 690px; 
	height: 35px; 
	z-index: 2; 
	float: left; 
	margin-right: 20px; 
	margin-left: 40px; 
	padding: 5px; 
	border-bottom: 1px solid #e2e2e2; }
#start { 
	background-color: purple; 
	position: relative; 
	bottom: 10px; 
	width: 205px; 
	height: 45px; 
	float: left; }
h2 { 
	font-size: 12pt; 
	font-weight: bold; 
	text-align: center; }
```

Menyn:

```
	 Recommended only to change the Div Tag Id name"#hxdmoomenu" and menus parent ul class ".menuhxdmenu"	***/
.menuhxdmenu,.menuhxdmenu  *{ 
	margin:0; 
	padding:0; }
div#hxdmoomenu{ 
	background-color: white; 
	z-index:100; }
#hxdmoomenu li li{ 
	z-index: 100; 
	margin:0; }
.menuhxdmenu { 
	line-height:1; 
	float:left; 
	margin-bottom:1.5em; 
	position:relative; 
	z-index:101 }
.menuhxdmenu  ul{ 
	background-image: none; 
	background-repeat: repeat; 
	background-attachment: scroll; 
	background-position: 0 0; 
	z-index: 100; 
	padding:0; }
.menuhxdmenu  li{ 
	float:left; 
	list-style:none; 
	position:relative; 
	z-index: 100; }
div#hxdmoomenu li li a, div#hxdmoomenu li.active li a{ 
	display:block; 
	padding:0; 
	margin:0; 
	text-decoration:none; 
	float:none; 
	width:98%; 
	z-index: 100; }
.menuhxdmenu  li ul{ 
	float:none; 
	left:-999em; 
	position:absolute; 
	width:170px; 
	z-index:102; }
.menuhxdmenu  li:hover ul,
.menuhxdmenu  li.sfHover ul{ 
	color: #d6d6d6; 
	left:0; 
	top:25px; 
	z-index: 100; }
.menuhxdmenu  li:hover li ul,
.menuhxdmenu  li.sfHover li ul,
.menuhxdmenu  li li:hover li ul,
.menuhxdmenu  li li.sfHover li ul,
.menuhxdmenu  li li li:hover li ul,
.menuhxdmenu  li li li.sfHover li ul{ 
	color: #d6d6d6; 
	top:-999em; 
	z-index: 100; }
.menuhxdmenu  li li:hover ul,
.menuhxdmenu  li li.sfHover ul,
.menuhxdmenu  li li li:hover ul,
.menuhxdmenu  li li li.sfHover ul,
.menuhxdmenu  li li li li:hover ul,
.menuhxdmenu  li li li li.sfHover ul{ 
	color: #d6d6d6; 
	left:170px; 
	top:0; 
	z-index: 100; }
.menuhxdmenu  li li{ 
	position:relative; 
	float:none; 
	width:100%; 
	z-index: 100; }
/*** EDIT THESE CSS CODES WITH CARE: ENDS ***/
#hxdmoomenu{ 
	color: black; 
	z-index: 100; }

#hxdmoomenu ul{ 
	background-image: none; 
	background-repeat: repeat; 
	background-attachment: scroll; 
	background-position: 0 0; 
	margin: 0; 
	padding: 0; 
	width: 500px; 
	z-index: 100; }		

#hxdmoomenu ul li{ 
	line-height: 25px; 
	text-align: center; 
	width: 100px; 
	height: 25px; 
	z-index: 100; 
	float: left; 
	margin:0; 
	padding: 0; 
	display:block; }

#hxdmoomenu ul li a{ 
	margin:0; 
	display:block; 
	float: left; 
	height: 25px; 
	line-height: 25px; 
	text-align: center; 
	width: 100px; 
	z-index: 100; 
	padding: 0; }		

#hxdmoomenu ul li a:hover{ 
	color: #d6d6d6; 
	width: 100px; 
	height: 25px; 
	z-index: 100; 
	float: left; 
	display:block; }		

#hxdmoomenu li.active a { 
	z-index: 100; 
	display:block; }

#hxdmoomenu li ul { 
	background-color: yellow; 
	width: 100px; 
	z-index: 100; 
	border-bottom: 1px dotted black; }

#hxdmoomenu ul ul ul { 
	width: 100px; 
	z-index: 100; 
	border-bottom: 1px solid black; }

#hxdmoomenu ul ul li{ 
	display:block; 
	text-align:left; 
	width: 90px; 
	z-index: 100; 
	padding: 0; }

#hxdmoomenu ul ul li a{ 
	left: 50px; 
	width: 100px; 
	z-index: 100; 
	float: left; 
	display:block; }

#hxdmoomenu li.active li a { 
	width: 100px; 
	z-index: 100; }

#hxdmoomenu ul ul li a:hover,
#hxdmoomenu ul li.active.parent ul a:hover { 
	color: #d6d6d6; 
	z-index: 100; 
	display:block; }
```

Permalänk: https://www.webforum.nu/p/2239944

---

Tråden på webben: https://www.webforum.nu/amne/html-css/183763-z-index