[英]Z-index issue with css transitions and positioning
有一些代码
<aside class="fixed-col">
<div class="fix-wrap cf">
<div class="fixed-col-inner">
<h1>LOREMr</h1>
<div class="menu-button">
<a href="#" onclick="return false" class="close-menu"></a>
</div><!-- menu-button -->
<input type="text" id="search" placeholder="search...">
<button class="search-button"></button>
<div class="fav-wrap">
<a href="#" class="fav">fav (0)</a>
</div><!-- fav-wrap -->
<div class="menu-side">
<div class="main-menu-wrap">
<img src="img/userpic.png" height="31" width="31" alt="">
<a href="#" class="username">username</a>
<a href="#" class="logout">logout</a>
<ul class="main-nav">
<li><a href="#">articles</a></li>
<li class="last-li"></li>
</ul>
</div><!-- main-menu-wrap -->
<ul class="second-nav">
<li class="open-hidden-nav">
<a href="#">HOVER HERE</a>
<div class="hidden-nav">
<h4>123</h4>
<ul class="home-menu-list">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
<h4>222</h4>
<ul class="decor-menu-list">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</div><!-- hidden-nav -->
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div><!-- menu-side -->
<ul class="social">
<li class="facebook"><a href="#"></a></li>
</ul>
</div><!-- fixed-col-inner -->
</div><!-- fix-wrap -->
</aside><!-- fixed-col -->
<aside class="fixed-col-closed">
<div class="fix-wrap">
<div class="fixed-col-closed-inner">
<div class="menu-button">
<a href="#" onclick="return false" class="open-menu"></a>
</div><!-- menu-button -->
<ul class="closed-fav">
<li class="fav-ico"></li>
<li><a href="#">0</a></li>
</ul>
<ul class="closed-social">
<li class="facebook"><a href="#"></a></li>
<li class="vk"><a href="#"></a></li>
</ul>
</div>
</div><!-- fix-wrap -->
</aside><!-- fixed-col-close -->
<div class="to-top">
<a href="#" class="scrollup">Scroll</a>
</div>
<section class="main-section cf opened-side">
<div class="col">
<article class="item">
<a href="#"><img src="img/img1.jpg" height="286" width="366" alt=""></a>
<h2><a href="#">LOREM IPSUM DOLOR</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum excepturi omnis quae nulla officia asperiores repudiandae ratione labore eius eveniet? Unde architecto omnis itaque doloribus nostrum odit exercitationem ipsum non.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis nemo ut suscipit accusamus minus soluta iure mollitia est aliquam dolores ipsa officia id quia distinctio recusandae eaque ea. Libero cum.</p>
<a href="#" class="read-more">read-more</a>
<div class="hidden-article-item">
<p class="author"><a href="#">author</a></p>
<p class="like-and-view"><span class="view">12</span> <span class="like">5</span></p>
</div><!-- hidden-article-item -->
</article>
</div>
</section>
其固定位置位于左侧边栏。 将鼠标悬停在.open-hidden-nav
存在一个隐藏菜单,该菜单从左向右滑动,并位于侧边栏附近, position: fixed
。
问题
.open-hidden-nav
上时,没有任何打开。 您可以看到隐藏的菜单从左到右滑动,因为侧边栏背景是透明的,但是您看不到最终形式的菜单。 .open-hidden-nav
鼠标从底部移到顶部时,它的工作正常,但是当您尝试悬停文章时(在侧边栏右侧)然后.open-hidden-nav
在隐藏菜单打开之前,您会看到一些延迟。 这是JsFiddle演示 。
谢谢你的帮助。
谁不知道如何进入代码编辑模式-只需从链接中删除/show/
。
.main-section {
margin-left: 290px;
margin-right: 65px;
background: #fff;
box-shadow: 4px 0 5px -2px #d0d0d0;
position: relative;
z-index: -100;
}
.hidden-nav {
width: 206px;
height: 100%;
position: fixed;
top: 0;
left: -290px;
background: black;
transition: .5s;
z-index: 100;
overflow-y: auto;
}
我尝试使用此CSS,并且从右侧悬停时Chrome中没有跳跃。 因此,两个容器都需要z-index。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.