» Poradna » Web a internet

Překrývání rozbalovacího menu sliderem (z-index)

 |   |  Microsoft Windows 10 Chrome 65.0.3325.181

Ahoj,chci se zeptat, jak nastavím, aby mi slider nepřekrýval rozevírací menu, nevím si už rady.viz. http://www.emporio-exclusive.cz/index2.phpZkoušel jsem si pohrát s nastavením z-indexu, ale marně. Prosím o pomoc. Díky

Odpovědi na otázku

 |   |  Microsoft Windows 7 Firefox 59.0

nastav ještě prvku, který bude pod menu, z-index menší než má menu

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Macintosh OS X AppleMAC-Safari 5.0

To jsem prave zkousel nepodarilo se :( mohl bys prosim ukazat primo v kodu? Je to jssor slider z netu..

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Macintosh OS X Chrome 65.0.3325.181

změň si CSS na:#nav li ul { display: none; z-index: 1000;}a html pro slider:<div style="position: absolute;display: block;top: 0px;left: 0px;width: 1000px;height: 350px;z-index: 0;"><div style="position: absolute; display: block; top: 0px; left: 0px; width: 1000px; height: 350px; transform: scale(1.001);"><div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 0px; width: 1000px; height: 350px; overflow: hidden; margin: 0px; padding: 0px; z-index: 0; pointer-events: none;"><div style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; z-index: 0; display: none; transform: translate3d(-693.307px, 0px, 0px);"></div></div><div data-u="slides" style="cursor: default; position: absolute; top: 0px; left: 0px; width: 1000px; height: 350px; overflow: hidden; margin: 0px; padding: 0px; z-index: 0;"> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/001.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/002.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/003.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/004.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/005.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/006.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/007.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/008.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; transform: translate3d(-693.307px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/009.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; display: block; transform: translate3d(306.693px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/010.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; display: block; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/011.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> <div data-p="170.00" style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; overflow: hidden; perspective: 170px; display: block; transform: translate3d(-1000px, 0px, 0px);" data-events="auto" data-display="block"> <img data-u="image" src="img/012.jpg" border="0" style="top: 0px; left: 0px; width: 1000px; height: 350px; position: absolute; display: block; z-index: 1;" data-events="auto" data-display="block"> </div> </div></div></div>

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Macintosh OS X Chrome 65.0.3325.181

sakra, stačí změnit tohle:<div style="position: absolute;display: block;top: 0px;left: 0px;width: 1000px;height: 350px;z-index: 0;">přidání z-index:0vyzkoušel jsem to v chrome a funguje to

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 65.0.3325.181

Achjo, stejně mi to nejede.... <div id="header"> <div class="center"> <div id="logo"> <a href="/"><img src="/_images/logo_green.png" alt="" title=""/></a> <form action="/vyhledat/" method="post"> <input type="text" name="search" placeholder="Vyhledat na webu"/><button type="submit"><i class="fa fa-search"></i></button> </form> </div> <div id="nav-block"> <div class="mobile-menu"><span>HLAVNÍ NABÍDKA</span><i class="fa fa-bars"></i></div> <ul id="nav"> <li <?PHP echo $Main->getMenuActive(); ?>> <a href="/" class=""><i class="fa fa-home"></i> O firmě</a> <ul> <li <?PHP echo $Main->getMenuActive("podporujeme"); ?>><a href="/podporujeme/" class=""><i class="fa fa-usd"></i> Podporujeme</a> </ul> </li><li <?PHP echo $Main->getMenuActive("sluzby"); ?>><a href="/sluzby/" class=""><i class="fa fa-wrench"></i> Služby</a> <ul> <li <?PHP echo $Main->getMenuActive("demolice-a-bouraci-prace"); ?>><a href="/demolice-a-bouraci-prace/" class=""><i class="fa fa-legal"></i> Demolice a bourací práce</a> <ul> <li <?PHP echo $Main->getMenuActive("velkoobjemove-kontejnery"); ?>><a href="/velkoobjemove-kontejnery/" class=""><i class="fa fa-trash"></i> Velkoobjemové kontejnery</a></li> </ul> </li> <li <?PHP echo $Main->getMenuActive("stavebni-cinnost"); ?>><a href="/stavebni-cinnost/" class=""><i class="fa fa-truck"></i> Stavební činnost</a> <ul> <li <?PHP echo $Main->getMenuActive("rekonstrukce-bytoveho-jadra"); ?>><a href="/rekonstrukce-bytoveho-jadra/" class=""><i class="fa fa-building-o"></i> Rekonstrukce bytu</a></li> <li <?PHP echo $Main->getMenuActive("zatepleni-fasady-domu"); ?>><a href="/zatepleni-fasady-domu/" class=""><i class="fa fa-home"></i> Zateplení fasády domu</a></li> <li <?PHP echo $Main->getMenuActive("montaz-sadrokartonu"); ?>><a href="/montaz-sadrokartonu/" class=""><i class="fa fa-wrench"></i> Montáž sádrokartonu</a></li> <li <?PHP echo $Main->getMenuActive("prumyslove-podlahy"); ?>><a href="/prumyslove-podlahy/" class=""><i class="fa fa-eraser"></i> Průmyslové podlahy</a></li> <li <?PHP echo $Main->getMenuActive("malirske-prace"); ?>><a href="/malirske-prace/" class=""><i class="fa fa-paint-brush"></i> Malířské práce</a></li> </ul> </li> <li <?PHP echo $Main->getMenuActive("recyklace-a-likvidace-odpadu"); ?>><a href="/recyklace-a-likvidace-odpadu/" class=""><i class="fa fa-trash-o"></i> Recyklace a likvidace odpadu</a> <ul> <li <?PHP echo $Main->getMenuActive("recyklace-stavebniho-odpadu"); ?>><a href="/recyklace-stavebniho-odpadu/" class=""><i class="fa fa-trash"></i> Recyklace stavebního odpadu</a></li> </ul> </li> <li <?PHP echo $Main->getMenuActive("zemni-a-vykopove-prace"); ?>><a href="/zemni-a-vykopove-prace/" class=""><i class="fa fa-tree"></i> Zemní a výkopové práce</a> <ul> <li <?PHP echo $Main->getMenuActive("rekultivace"); ?>><a href="/rekultivace/" class=""><i class="fa fa-tree"></i> Rekultivace</a></li> <li <?PHP echo $Main->getMenuActive("terenni-upravy"); ?>><a href="/terenni-upravy/" class=""><i class="fa fa-tree"></i> Terénní úpravy</a></li> </ul> </li> </ul> </li><li <?PHP echo $Main->getMenuActive("stavebni-stroje-mechanizace"); ?>><a href="/stavebni-stroje-mechanizace/" class=""><i class="fa fa-truck"></i> Mechanizace</a> </li><li <?PHP echo $Main->getMenuActive("ke-stazeni"); ?>><a href="/ke-stazeni/" class=""><i class="fa fa-file-o"></i> Ke stažení</a> </li><li <?PHP echo $Main->getMenuActive("reference"); ?>><a href="/reference/" class=""><i class="fa fa-user"></i> Reference</a> </li><li <?PHP echo $Main->getMenuActive("kontakt"); ?>><a href="/kontakt/" class=""><i class="fa fa-phone"></i> Kontakty</a> </ul> <div class="clear"></div> </div> <?PHP if (empty($Main->URL[0])) { ?> <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1000px;height:330px;overflow:hidden;visibility:hidden;"> <!-- Loading Screen --> <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/spin.svg" /> </div> <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1000px;height:350px;overflow:hidden"> <div data-p="170.00"> <img data-u="image" src="img/001.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/002.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/003.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/004.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/005.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/006.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/007.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/008.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/009.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/010.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/011.jpg" /> </div> <div data-p="170.00"> <img data-u="image" src="img/012.jpg" /> </div> </div> <!-- Bullet Navigator --> <div data-u="navigator" class="jssorb051" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75"> <div data-u="prototype" class="i" style="width:16px;height:16px;"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <circle class="b" cx="8000" cy="8000" r="5800"></circle> </svg> </div> </div> <!-- Arrow Navigator --> <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline> </svg> </div> <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline> </svg> </div> </div> <script type="text/javascript">jssor_1_slider_init();</script> <!-- #endregion Jssor Slider End --> <?PHP } ?> <div id="header-image-shadow"> <img src="/_images/stiny/9.png" alt="" title=""/> </div> </div> </div>

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 65.0.3325.181

VYŘEŠENO! Musel jsem změnit z-index na z-index:-1;<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1000px;height:330px;overflow:hidden;visibility:hidden;z-index:-1;">

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 10 Chrome 65.0.3325.181

Jenže teď mi nejde posouvat fotky posuvníkem, ani šipkami.. :D achjo

Souhlasím  |  Nesouhlasím  |  Odpovědět

Související témata: Stream.cz, Stream, Index, Slider


Určitě si přečtěte



Aktuální číslo časopisu Computer

Velký test Wi-Fi mesh

Nejlepší hodinky pro všechny aktivity

Důležité aplikace na cesty

Jak streamovat video na Twitch