gpt4 book ai didi

CSS:如何阻止固定导航栏重叠滚动条?

转载 作者:行者123 更新时间:2023-11-28 11:28:06 25 4
gpt4 key购买 nike

我正在创建一个简单的布局。只要我点击搜索,导航栏就会与侧边栏滚动条重叠。我该如何解决这个问题?

这是代码

 $('document').ready(function () {


$('.search-icon').click(function () {

var search_form = $('.search-form');

if(search_form.hasClass("form-open"))
{
// form is open, close the form
$('.search-form').toggle();
$('.search-form').removeClass("form-open");

}

else
{
// open the form
$('.search-form').toggle();
$('.search-form').addClass("form-open");

}

});

});
        
ul{
list-style-type: none;
}

div.section-inner{
max-width: 1100px;
padding: 0 15px;
margin: 0 auto;
}
.nav{
background-color: #222;
position: fixed;
top: 0;
width: 100%;
}

.nav .site-title{
font-size: 1.5em;
display: inline-block;
font-weight: bold;
float: left;
color: #fff;
margin: 0;
padding: 10px 10px;
}

.nav a{
color: #fff;
}

.nav ul a{
font-size: 1.5em;
display: inline-block;
padding: 10px 10px;
}

.nav ul a:hover{
background-color: #4a3f3f;
}

.nav ul{
list-style-type: none;
/*display: inline-block;*/
float: right;
margin: 0;
}

.nav ul li{
float: left;
}

.clearfix:after{
content: '';
display: block;
clear: both;
}

.clear{
clear: both;
}

.nav .search-icon{
background: url("https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/search-icon.svg") 50% 50% no-repeat #222;
font-size: 12px;
padding: 18px 20px;
/* background-color: #d67474; */
display: inline-block;
background-size: 2.5em;
cursor: pointer;
margin-top: 2.5px;
float: right;
}

.search-form{
clear: both;
display: none;
text-align: center;
padding: 5px 0;
}

.search-form input {
display: inline-block;
padding: 6px 24px;
font-size: 16px;
outline: none;
border: 1px solid;
border-radius: 3px;
}

.search-form input[type="text"]{
width: 20em;
padding-left: 10px;
}


.search-form button {
display: inline-block;
}

.main-body .sidebar{
position: fixed;
width: 250px;
height: 500px;
overflow: scroll;
font-size: 1.2em;
overflow-x: hidden;
/*z-index: -1;*/
}

.main-body .sidebar .course-title{
margin-top: 0;
font-size: 2.2em;
}

.main-body .sidebar ul{
padding-left: 20px;

}

.main-body .sidebar .lesson{
font-size: 1.5em;
font-weight: bold;
}

.main-body .sidebar li{
font-size: 1.2em;
line-height: 1.6;
}

.main-body .main{
/*margin-top: 20px;*/
margin-top: 55px;
margin-left: 290px;
}

.main-body .main h2{
margin-top: 0;
font-size: 21px;
}

.main-body .main .code-snippet{
font-size: 1.8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--nav-->
<div class="nav">
<div class="section-inner clearfix">
<h1 class="site-title"><a href="">EXAMPLE.COM</a></h1>

<div class="mnb">

<div class="navicon">
</div>

<div class="search-icon">
<a href="#"></a>
</div>

</div>

<ul class="nav-list">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

<div class="search-form clear">
<form action="#">
<input type="text" name="search" placeholder="Search..." />
<input type="submit" value="Search">
</form>
</div>

</div>
</div>
<!--/nav-->

<!--main-body-->
<div class="main-body">
<div class="section-inner clearfix">
<!--sidebar-->
<div class="sidebar">
<h3>Title</h3>
<h3 class="lesson">Chapter 1</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<!--/sidebar-->

<div class="main">
<h2>Headling 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>

<h2>Headling 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam at atque consectetur corporis, culpa eaque esse explicabo fugit hic laboriosam laborum necessitatibus nesciunt obcaecati quaerat rem rerum saepe vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, culpa hic illum numquam sapiente tenetur? Atque harum maiores soluta voluptate! Accusantium, consequatur doloremque fugit laudantium optio pariatur placeat repellat sequi.</p>


</div>

</div>

</div>
<!--/main-body-->

我已经尝试将 z-index 设置为 -1 但它没有用。我该如何解决?

最佳答案

尝试将 z-index: 1 添加到 .nav

.nav {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

关于CSS:如何阻止固定导航栏重叠滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42359519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com