我正在处理一个网页。我做了一个顶部导航栏,添加了链接等等!现在,我试图添加一个设置按钮。该按钮有效,但是当我放置它时,它停止工作。我认为这是因为填充,但是我不知道如何解决。 The Padding Covers The Setting Button Code1
/*Navigation Bar Below*/
nav{
width: 100%;
height: 50px;
background-color: #aeaeae;
border-bottom: 5px solid #8d8d8d;
}
#list1{
}
#list1 li{
list-style: none;
display: inline-block;
line-height: 50px;
}
#list1 li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: MPLUS;
color: #ffffff;
padding: 0 20px;
}
#list1 li a:hover{
color: dodgerblue;
}
.inputWithIcon {
float: right;
padding-right: 37px;
}
/*Channel ID Search Below*/
input[type=text]{
width: 100%;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: .3s;
}
input[type=text]:focus {
border-color: dodgerblue;
box-shadow: 0 0 8px 0 dodgerblue;
}
input[type=text]{
width:100%;
border:2px solid #aaa;
border-radius:4px;
margin:8px 0;
outline:none;
padding: 8px;
box-sizing:border-box;
transition:.3s;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
.inputWithIcon input[type=text]{
padding-right: 30px;
}
.inputWithIcon{
position:relative;
}
.inputWithIcon i{
position:absolute;
right: 34.5px;
top:8px;
padding: 9px 10px;
color:#aaa;
transition:.3s;
cursor: pointer;
}
.inputWithIcon input[type=text]:focus + i{
color:dodgerBlue;
}
.search1{
padding-right: 37px;
}
/* Menu Button Below*/
.box-shadow-menu {
position: absolute;
padding-right: 20px;
}
.box-shadow-menu:before {
content: "";
position: absolute;
right: 0;
top: 0.25em;
width: 1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
}
.SettingsButton1{
position:absolute;
right: 25px;
top:8px;
padding: 9px 10px;
}
<div id="NavBar">
<nav>
<div class="SettingsButton1">
<i class="box-shadow-menu" aria-hidden="true" id="button" onclick="ViewsDisplay1()"></i>
</div>
<div class="Search1">
<div class="inputWithIcon">
<input type="text" placeholder="Channel ID" id="chnlname">
<i class="fa fa-search" aria-hidden="true" id="update"></i>
</div>
</div>
<ul id="list1">
<li><a href="#">Liker</a></li>
<li><a href="index.html">Live Count</a></li>
<li><a href="#">Logan IS Dumb</a></li>
</ul>
</nav>
</div>
答案 0 :(得分:0)
作为解决方案,可以将简单CSS中的z-index递增到按钮的最前面。但是,您可以提供您的代码,以便我们可以准确地了解您在说什么。
button {
z-index: 999;
}
答案 1 :(得分:0)
您可以将SettingsButton1 div移到Search1 div之后。 因此,而不是下面的代码。
<div class="SettingsButton1">
<i class="box-shadow-menu" aria-hidden="true" id="button" onclick="ViewsDisplay1()"></i>
</div>
<div class="Search1">
<div class="inputWithIcon">
<input type="text" placeholder="Channel ID" id="chnlname">
<i class="fa fa-search" aria-hidden="true" id="update"></i>
</div>
</div>
使用以下代码。
<div class="Search1">
<div class="inputWithIcon">
<input type="text" placeholder="Channel ID" id="chnlname">
<i class="fa fa-search" aria-hidden="true" id="update"></i>
</div>
</div>
<div class="SettingsButton1">
<i class="box-shadow-menu" aria-hidden="true" id="button" onclick="ViewsDisplay1()"></i>
</div>
或者您可以在SettingsButton1类样式中添加z-index:1。
更新1:CSS解决方案 或者,如果您只想使用CSS,则添加
.Search1{
position: relative;
padding-right: 37px;
}
并从.inputWithIcon类样式中删除padding-right:37px
。.
答案 2 :(得分:0)
我建议您研究CSS中的Z-index property。
这使您可以定义HTML中元素的堆叠顺序,z-index值越高,将被呈现的越高。因此,如果您将Div设置为z索引1000,将导航栏设置为500,则Div将在导航栏上方呈现。但是,如果您使用的是Bootstrap或Angular Material等组件库,则确实需要检入调试器以查看是否已获得Z-Index,有些东西已经有了Z-Index。