Ikony fontello nachodzące na menu

pytanie zadane 11 września 2022 w HTML i CSS przez pj-1024 Użytkownik (670 p.)
edycja 11 września 2022 przez pj-1024

Mam menu z position: fixed. Kiedy scrolluję stronę elementy chowają się pod menu a ikony fontello nachodzą na menu.

<?php
	session_start();
	if (!isset($_SESSION['logged'])) {
		header('Location: .');
		exit();
	} else {
		$user_name=$_SESSION['logged'];
	}
?>
<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="css/fontello.css" type="text/css">
	<link rel="stylesheet" href="style.css" type="text/css">
	<title></title>
</head>

<body>
	<header>
		<div class="div-hor logo"><a href="."><img src="logo.png"></a></div>
		<div id="header-menu">
			<a href="#1" class="txt-link"><div class="menu-button div-hor">Wyloguj</div></a>
			<a href="#2" class="txt-link"><div class="menu-button div-hor">Btn 1</div></a>
			<a href="#3" class="txt-link"><div class="menu-button div-hor">Btn 2</div></a>
			<a href="javascript:menu_toggle()" class="txt-link menubtn"><div class="menu-button div-hor"><?php echo $user_name; ?></div></a>
			<div class="clear"></div>
		</div>
	</header>
	<table class="table" cellspacing="0px" border="4px">
		<tbody>
			<tr><td width="100" align="center">Text<i class="icon-chat" onclick="func('param')"></i></td></tr>
 		</tbody>
	</table>

.icon-chat:before { content: '\e83d'; right: 41%; position: absolute; cursor: pointer; margin-top: 3px; } /* '' */

EDIT

header {
	padding: 10px;
	width: 100%;
	background-color: #DDD;
	position: fixed;
	-webkit-box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
	-moz-box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
	box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
}

.div-hor {
	float: left;
}

.logo {
	padding-left: 40px;
	padding-right: 80px;
}

table {
	border: 2px solid #888;
	border-radius: 5px;
	letter-spacing: 0.5px;
}

tr, td {
	border: 2px solid #444;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	-moz-box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	box-shadow: 0px 0px 15px 5px rgba(204,204,204,0.9);
	cursor: default;
}

.txt-link {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.menu-button {padding: 20px; width: 122px; text-align: center; margin-left: 10px;}
.menu-button:hover {background-color: #F0F0F0;}

komentarz 11 września 2022 przez Comandeer Guru (600,810 p.)

Trudno coś stwierdzić, skoro nie podałeś stylów strony.

1 odpowiedź

odpowiedź 11 września 2022 przez VBService Ekspert (253,100 p.)
wybrane 12 września 2022 przez pj-1024

Najlepsza

Możesz dodać w css-ie do header właściwość z-index

header {
    padding: 10px;
    width: 100%;
    background-color: #DDD;
    position: fixed;
    -webkit-box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
    -moz-box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
    box-shadow: 3px 3px 30px 5px rgba(204,204,204,0.9);
    z-index: 9999;
}

P.S. Why do I have to configure z-index to be 9999