z-index 和 CSS 定位不起作用

Question

我有一个带有垂直导航菜单的侧边栏，需要让悬停子菜单浮动到侧边栏的左侧，但是悬停时子菜单被侧边栏的边缘截断...如何做我打算把这个放在首位吗？

我尝试过使用 z-index' 并更改定位，但我不确定要设置哪个元素的位置。

由于布局原因，侧边栏需要固定位置。

这是基本布局的 jsfiddle https://jsfiddle.net/Lnhrbouo/

任何帮助将不胜感激，因为我已经在这里工作了几个小时。

谢谢。

<div class="sideBar">
<div id="side-wrap" class="container">
    <div id="wrapper-side">
        <div id="logo">
            <img src="images/logo-shot.png" />
        </div>
        <div id="a">
            <ul class="nav">
                <li><a href="test7.php">Home</a>
                </li>
                <li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>

                    <ul>
                        <li><a href="accounting.php">Accounting</a>
                        </li>
                        <li><a href="cloud.php">Cloud Accounting</a>
                        </li>
                        <li><a href="tax.php">Tax</a>
                        </li>
                        <li><a href="business.php">Business Planning</a>
                        </li>
                        <li><a href="future.php">Planning Your Future</a>
                        </li>
                    </ul>
                </li>
                <li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>

                    <ul>
                        <li><a href="staff.php">Staff</a>
                        </li>
                        <li><a href="values.php">Our Values</a>
                        </li>
                    </ul>
                </li>
                <li><a href="blog.php">Blog</a>
                </li>
                <li><a href="contact.php">Contact</a>
                </li>
            </ul>
        </div>
        <div id="newsletter">
             <h1>NEWSLETTER</h1> 
            <div id='content'>
                <div id="hidden-content"> <span class="signup">Sign Up Today</span> 
                    <input class="side-mail" type="text" name="FirstName" placeholder="Enter your email here">
                    <br>
                    <input type="submit" value="SUBMIT" class="submit-button">
                </div>
            </div>
            <div id='button'>
                <sctrong>
                    <img src="images/more-banner.png" />
                    </strong>
            </div>
            <script>

            </script>
        </div>
        <div id="barFoot">
            <p>© 2013 address goes here</p>
        </div>
    </div>
</div>
</div>
</div>
<div id="container">
<div class="wrapper">
    <div class="centre">
        <div class="visibleArea">
            <div id="header-text">
                <p class="call-top"><span class="hide-call">CALL TODAY     </span>
                    <span="small-call"><strong>00000</strong> | <a href="#"><i class="fa fa-linkedin fa-fw"></i></a>  <a href="#"><i class="fa fa-twitter fa-fw"></i></a>  <a href="#"><i class="fa fa-google-plus fa-fw"></i></a>
                        </span>
                        <div id="top2">
                            <div class="section group">
                                <div class="col span_1_of_2">
                                    <img src="images/logo-round.PNG" />
                                </div>
                                <div class="col span_1_of_2 split">
                                    <div id="ftp-ico">  <a href="#"><i class="fa fa-linkedin fa-fw"></i></a>  <a href="#"><i class="fa fa-twitter fa-fw"></i></a>  <a href="#"><i class="fa fa-google-plus fa-fw"></i></a>

                                    </div>
                                    <div id="show-number">CALL TODAY</span>
                                        <span="small-call">    <strong>000000</strong>

                                    </div>
                                    <div id="resp-newsletter">
                                        <input class="side-mail split-news" type="text" name="FirstName" placeholder="Sign up for our newsletter">
                                        <input type="submit" value="SUBMIT" class="submit-button split-side">
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="full" style="background:#456789;">
        <div class="slider">
            <img src="images/ggow.PNG" />
            <img src="images/dome.PNG" />
            <img src="images/reflect.PNG" />
            <img src="images/purple.png" />
        </div>
    </div>

Answer 1

内部 .sideBar class 更改

overflow-y: auto;

至

overflow: visible;

https://jsfiddle.net/Lnhrbouo/2/

z-index 和 CSS 定位不起作用

z-index and CSS positioning not working

layout

position

z-index

css-position