Fixed menu hides even with z-index

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's a set menu at the top. However, when the content of the div id = content goes through the menu, it always goes over, hiding the icons.

    
asked by anonymous 09.08.2018 / 09:37

1 answer

2

Content behavior is correct, according to your CSS it should come over the menu.

By default, the% w / o of elements is zero, and the order of rendering when the values "match" is to first draw the parent, and on it the child element.

When you want to move one element up (more "near the user") of another, you should use a z-index greater than the element that will be hidden / hidden.

It gets more confusing when z-index is about elements in different "branches" of hierarchy, which is not your case, the divs are on the same level.

If you want to dig deeper into "stacking contexts," use this link and read this answer .


Analyzing your specific problem:

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

#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:3 :

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

... so the menu should stay behind the content.


The solution:

If you want z-index:1 covering #menu , you need to have #conteudo % greater than last.

That is:

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

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


Demonstration:

Click the "run" below to see the working CSS. If you do not know what to do, you should know that you have a lot of things to do.

<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><tdclass="tdmenu">
                  <a class="lmenu" href="#">
                     <img class=icn src="http://via.placeholder.com/150x150"></a></td><tdclass="tdmenu">
                  <a class="lmenu" href="#">
                     <img class=icn src="http://via.placeholder.com/150x150"></a></td></tr></table></div><divid="secundario">
         <ul id="usec">
            <li class="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150"></a></li><liclass="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150"></a></li><liclass="lisec">
               <a href="#">
                  <img class="icn" src="http://via.placeholder.com/150x150"></a></li></ul></div><divid="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>
    
09.08.2018 / 10:22