Fixed menu hides even with z-index

Asked

Viewed 49 times

0

I have the following code:

<html lang="pt-br">
		<head>
			<meta charset=utf-8/>
			<title>
				Inicio
			</title>
			<style type="text/css">
				
				*{
					font-size:18px;
					vertical-align: middle;
				}
				#menu{
					position:fixed;
					z-index:1;
					width:100%;
				}
				#tmenu{
					width:100%;
				}
				.lmenu{
					z-index:2;
				}
				.tdmenu{
					text-align:center;
				}
				.icn{
					width:2.5em;
				}
				#baixo{
					position:absolute;
					margin-top:2.5em;
				}
				#secundario{
					position:fixed;
					float:left;
					border:0;
				}
				#conteudo{
					position:absolute;
					text-align:justify;
					width:100%;
					z-index:3;
					margin-top:3em;
					margin-left:3em;
					margin-right:1em;
				}
				#usec{
					padding:0;
				}
				.lisec{
					margin-top:5em;
					list-style:none;
				}

			</style>
		</head>
		<body>
	
			<div id=menu>
				<table id=tmenu>
					<tr>
						<td class=tdmenu>
							<a class=lmenu href=http://127.0.0.1:8080>
								<img class=icn src=http://127.0.0.1/icones/home.png>
							</a>
						</td>
		
						<td class=tdmenu>
							<a class=lmenu href=http://127.0.0.1:8080/contato>
								<img class=icn src=http://127.0.0.1/icones/email.svg>
							</a>
						</td>
		
						<td class=tdmenu>
							<a class=lmenu href=http://127.0.0.1:8080/projetos>
								<img class=icn src=http://127.0.0.1/icones/settings.svg>
							</a>
						</td>
		
						<td class=tdmenu>
							<a class=lmenu href=http://127.0.0.1:8080/login>
								<img class=icn src=http://127.0.0.1/icones/person.svg>
							</a>
						</td>
		
					</tr>
				</table>
			</div>
			
			<div id=secundario>
				<ul id=usec>
	
					<li class=lisec>
						<a href=http://127.0.0.1:8080/adiciona>
							<img class=icn src=http://127.0.0.1/icones/add.svg>
						</a>
					</li>
		
					<li class=lisec>
						<a href=http://127.0.0.1:8080/deleta>
							<img class=icn src=http://127.0.0.1/icones/del.svg>
						</a>
					</li>
		
					<li class=lisec>
						<a href=http://127.0.0.1:8080/busca>
							<img class=icn src=http://127.0.0.1/icones/search.svg>
						</a>
					</li>
		
					<li class=lisec>
						<a href=http://127.0.0.1:8080/modifica>
							<img class=icn src=http://127.0.0.1/icones/settings.svg>
						</a>
					</li>
		
				</ul>
			</div>

			<div id=conteudo>
        <input type=text style=width:100%;/>
			  <p>
Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>
<p>{{ Alguma }}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.
</p>
<p>
Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.
</p>
<p>
Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.
</p>
<p>
Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.
</p>
<p>
Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.
</p>

			</div>
		</body>

Well, it is a fixed menu at the top. However, when the content of the div id=content goes through the menu, it always goes over, hiding the icons.

1 answer

3


It is correct the behavior of the content, according to your CSS it should come over the menu.

By default the z-index of the elements is zero, and the render order when the values "draw" is to draw first the parent, and on this, the child element.

When you want to move one element up (closer to the "user") from another, you should use one z-index larger than the element that will be hidden/hidden.

Gets more confused when the z-index deals with elements in different "branches" of hierarchy, which is not your case, the Divs are at the same level.

Those who want to delve deeper into the "stacking contexts", use this link and read this answer.


Analyzing your specific problem:

It turns out that in your CSS the content has z-index:3:

#conteudo{
   position:absolute;
   text-align:justify;
   width:100%;
   z-index:3;        /* <------- */
   margin-top:3em;
   margin-left:3em;
   margin-right:1em;

... and the menu z-index:1 :

#menu{
   position:fixed;
   z-index:1;        /* <------- */
   width:100%;
}

...so the menu should be behind the content.


The solution:

If you want the #menu covering up the #conteudo, needs this first to have a z-index bigger than the last.

That is to say:

#menu{
   position:fixed;
   z-index:4;        /* <------- maior que o 3 do #menu */
   width:100%;
}

Could eventually leave the content without z-index, but then you can start messing up other parts of the project.


Demonstration:

Click the "run" button below to see the working CSS. Taking advantage, it is worth saying that you need to tidy up your code, as it has many things without quotes, and XML tags mixed with HTML (closed with />).

<html lang="pt-br">
   <head>
      <meta charset="utf-8">
      <title>
         Inicio
      </title>
      <style type="text/css">
         *{
            font-size:18px;
            vertical-align: middle;
         }
         #menu{
            position:fixed;
            z-index:4;
            width:100%;
         }
         #tmenu{
            width:100%;
         }
         .lmenu{
            z-index:2;
         }
         .tdmenu{
            text-align:center;
         }
         .icn{
            width:2.5em;
         }
         #baixo{
            position:absolute;
            margin-top:2.5em;
         }
         #secundario{
            position:fixed;
            float:left;
            border:0;
         }
         #conteudo{
            position:absolute;
            text-align:justify;
            width:100%;
            z-index:3;
            margin-top:3em;
            margin-left:3em;
            margin-right:1em;
         }
         #usec{
            padding:0;
         }
         .lisec{
            margin-top:5em;
            list-style:none;
         }
      </style>
   </head>
   <body>
      <div id="menu">
         <table id="tmenu">
            <tr>
               <td class="tdmenu">
                  <a class="lmenu" href="#">
                     <img class=icn src="http://via.placeholder.com/150x150">
                  </a>
               </td>
               <td class="tdmenu">
                  <a class="lmenu" href="#">
                     <img class=icn src="http://via.placeholder.com/150x150">
                  </a>
               </td>
               <td class="tdmenu">
                  <a class="lmenu" href="#">
                     <img class=icn src="http://via.placeholder.com/150x150">
                  </a>
               </td>
            </tr>
         </table>
      </div>
      <div id="secundario">
         <ul id="usec">
            <li class="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150">
               </a>
            </li>
            <li class="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150">
               </a>
            </li>
            <li class="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150">
               </a>
            </li>
         </ul>
      </div>
      <div id="conteudo">
         <input type="text" style="width:100%">
         <p>Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.</p>
         <p>Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.</p>
         <p>Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.</p>
         <p>Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.</p>
         <p>Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.</p>
         <p>Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.</p>
         <p>Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.</p>
         <p>Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.</p>
         <p>Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.</p>
         <p>Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.</p>
         <p>Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.</p>
         <p>Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.</p>
         <p>Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.</p>
         <p>Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.</p>
         <p>Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.</p>
         <p>Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.</p>
         <p>Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.</p>
         <p>Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.</p>
         <p>Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.</p>
         <p>Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.</p>
         <p>Lorem ipsum ... dolor sit amet, consectetur adipiscing elit. Nullam ac semper est. Donec sit amet justo nec nibh pulvinar gravida sed nec nulla. Vestibulum nec porttitor enim, ut ultrices erat. Nam ut sapien ac dui luctus fermentum ut tristique eros. Vivamus condimentum odio massa, eget congue metus tincidunt id. Pellentesque consectetur lacus nec gravida fringilla. Nulla facilisi. Nunc ac turpis tristique, suscipit orci non, blandit sapien. Phasellus ut lectus id est venenatis scelerisque. Quisque dictum id metus sed molestie. Curabitur elit nisl, congue finibus dui vitae, eleifend rutrum nulla. Vestibulum vitae nibh ac orci feugiat malesuada. Aliquam leo mi, volutpat quis ex quis, consectetur blandit arcu. Praesent diam quam, ullamcorper pulvinar cursus tincidunt, elementum eu lectus. Nunc in elit malesuada quam varius condimentum sit amet sed lacus. In sagittis turpis quis quam pulvinar dictum.</p>
         <p>Morbi sed diam sed turpis tempus condimentum id laoreet dolor. Quisque pretium, nisi quis pretium varius, metus ante efficitur dolor, eget pharetra enim leo quis mauris. Integer suscipit elementum quam, eu viverra odio dictum quis. Cras justo dui, elementum quis rhoncus rhoncus, semper ut dui. Pellentesque non ullamcorper augue. In ornare, sapien quis dignissim ultrices, ante nunc auctor purus, et sollicitudin risus lorem vel erat. Sed iaculis pharetra purus.</p>
         <p>Maecenas et consequat neque. Proin a eros nisl. Nullam a arcu urna. Sed odio libero, auctor a consequat vel, efficitur vel tellus. Morbi efficitur nisi ut fringilla vulputate. Mauris neque sapien, venenatis eu velit a, porta tincidunt orci. Praesent commodo egestas dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed bibendum gravida nulla. Integer vitae efficitur lectus. Integer ac sapien purus. Donec vulputate leo id risus lobortis, molestie pretium magna ullamcorper. Sed efficitur placerat enim, sit amet vehicula ex tempor sed. Nam finibus feugiat arcu, sed venenatis tellus facilisis vitae.</p>
         <p>Integer tincidunt, nisi luctus tincidunt interdum, erat risus mattis odio, at ultricies velit ex at erat. Nunc vitae enim ac orci vestibulum semper. Suspendisse pulvinar dolor nisi, et vulputate nisl volutpat non. Quisque ac leo vitae dui ornare porta. Aliquam erat volutpat. Nulla facilisi. Praesent congue nisl varius metus facilisis, id mattis quam euismod. Mauris vestibulum turpis ut lacus lobortis, in ultrices odio bibendum. Phasellus eu pellentesque tellus. Nulla vitae ligula non ante faucibus volutpat a mattis odio. Mauris erat nibh, mollis ac mauris quis, dignissim auctor orci. Nullam accumsan nibh vel augue ornare, quis cursus leo finibus. Morbi vel ante a sem feugiat mollis quis condimentum odio.</p>
         <p>Vivamus vitae maximus leo, sed pretium urna. Curabitur congue dapibus nibh id tincidunt. Integer sed velit in mi consequat varius. Cras sed sagittis lectus. Sed sed sapien non nisl bibendum laoreet et eget risus. Fusce sem lectus, fringilla sit amet nisi nec, cursus efficitur sem. In hendrerit quis quam eu tristique. Sed nec posuere sem, vel placerat ligula. Phasellus tristique facilisis sodales. Sed eget tortor placerat libero feugiat pulvinar sit amet quis metus. Phasellus fermentum pharetra nulla sed lacinia.</p>
      </div>
   </body>
</html>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.