Question

我的代码运行良好，直到我将z-index添加到我的代码中，将一些按钮放在我的FULL SCREEN jq滑块（z-index for button over jquery slider）上。从那时起，溢出不再被隐藏。

这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>OKT</title>
    <link rel="stylesheet" type="text/css" href="css\mystyle.css">
    <link rel="shortcut icon" href="images\FirstBlack.ico">
    <link rel="icon" type="image/png" href="images\IconPNG.png"/>
    <script src="js/dw_con_scroller.js" type="text/javascript"></script>
    <script type="text/javascript">
        var vel = 50;
        if ( DYN_WEB.Scroll_Div.isSupported() ) {
            DYN_WEB.Event.domReady( function() {
            var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
            wndo.makeSmoothAuto( {axis:'h', bRepeat:true,repeatId:'rpt1', speed:vel
            , bPauseResume:false,} );
            });
        }
    </script>
</head>
<body>
    <div id="wn">
        <div id="lyr1">
            <div id="inner1"> 
                <img src="images/1-2.png" width="2000"height="1200" alt="" />
<img id="rpt1" src="images/1-2.png" width="2000" height="1200" alt="" />
            </div> 
        </div>
    <script>
        var vel = 50;
        function incrementVel(){
            vel= vel+10;
            initSlider();
            document.getElementById("velocita").value = vel;
        }
        function decrementVel(){
            vel=vel-10;
            initSlider();
            document.getElementById("velocita").value = vel;
        }
        function initSlider(){
            if ( DYN_WEB.Scroll_Div.isSupported() ) {
                DYN_WEB.Event.domReady( function() {
                    var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
                    wndo.makeSmoothAuto( {axis:'h', bRepeat:true,repeatId:'rpt1', speed:vel
                    , bPauseResume:false,} );
                });
            }
        }
    </script>
    <button onclick="decrementVel()">-</button><button onclick="incrementVel()">+</button> <input type="text" id="velocita">
    <p><button onClick="parent.location='OKT3-4.html'">Prev</button><button onClick="parent.location='www.google.it'">Next</button></p>
    </div>
</body>
</html>

这是我的CSS代码

body{
margin: 0;
padding: 0;
 position:relative;
overflow:hidden;
}

input[type=text]{
 position:relative;
  z-index:2;
}

button{
 position:relative;
  z-index:2;
}
div#wn { 
 position:relative;
overflow:hidden;
    width:2000px; height:1200px; 
        }   
div#inner1, div#inner2 {
    white-space:nowrap;
    }

div#lyr1 {
     position:relative;
    z-index:1;
    }

溢出：插入z-index后隐藏不起作用

0 个答案: