CSS code:-
*{
margin: 0px;
padding: 0px;
border: none;
}
.title{
text-align: center;
color: red;
font-size: 30px;
padding: 20px;
box-shadow: 0px 0px 7px #000;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.tabsWraper {
list-style-type: none;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.contents{
margin-left:25%;
padding:1px 16px;
height:1000px;
bottom: 2000px;
}
html section:-
<body>
<div class="title">
BLOOD BANK MANAGEMENT SYETEM
</div>
<div class="container">
<ul class="tabsWraper">
<li class="tabs">
<a class="active" href="#">Add Person</a>
</li>
<li class="tabs">
<a href="#">New Donation</a>
</li>
<li class="tabs">
<a href="#">New Recieve</a>
</li>
<li class="tabs">
<a href="#">Check Stock</a>
</li>
</ul>
<div class="contents">
cfgcggfcgfcggf
</div>
</div>
</body>
I have this code in my project. when i scroll the webpage, the contents inside the contents division passes through the title which was not expected.Can someone tell a suggestion to fix this problem.I tried using z-index prperty but that doesn't work.
Aucun commentaire:
Enregistrer un commentaire