2
私は単純なレイアウトを作成しています。検索をクリックすると、すぐにサイドバーのスクロールバーがオーバーラップします。どうすればこの問題を解決できますか？ここでCSS：固定されたナビゲーションバーがスクロールバーと重なってしまうのを止めるにはどうすればいいですか？
は、私はすでに-1にz-indexを設定しようとしたが、それはうまくいきませんでしたコード
$('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-->です。どのように私はそれを修正するのですか？
.navに追加します – Cody