我希望这张棒球图片出现在赞助商名单的背景中。但是如果我将高 z-index 应用于赞助商链接和赞助商 header ，则什么也不会发生。
如果我尝试在棒球上放置一个负的 z-index，它会落在我的主容器后面。然后，我尝试向我的主容器中添加一个更低的 z-index，但这破坏了我的导航。
当我将 z-index 应用于 h2 或 a 时，为什么它不起作用
棒球 CSS
.baseball {
background-image:url('../img/baseball.png');
width:150px;
height:150px;
position:absolute;
right:0;
z-index:0;
}
赞助商 HTML
<body>
<div class="main-container">
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="more">
<a>Teams</a>
<ul>
<li><a href="teams/9u.html">Team 9u</a></li>
<li><a href="teams/10u.html">Team 10u</a></li>
<li><a href="teams/11u.html">Team 11u</a></li>
<li><a href="teams/12u.html">Team 12u</a></li>
<li><a href="teams/13u.html">Team 13u</a></li>
<li><a href="teams/14u.html">Team 14u</a></li>
<li><a href="teams/15u.html">Team 15u</a></li>
<li><a href="teams/16u.html">Team 16u</a></li>
</ul>
</li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="baseball"></div>
<div class="header-text"></div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<h2>Related Links</h2>
<ul>
<li><a href="http://www.nobf.net/" target="_blank">North Oakland Baseball Federation</a></li>
<li><a href="http://www.aabc.us/" target="_blank">American Amateur Baseball Congress</a></li>
<li><a href="http://www.michusssa.com/" target="_blank">USSSA - Michigan</a></li>
<li><a href="http://www.lohsdragonsbaseball.com/" target="_blank">Lake Orion Varsity Baseball</a></li>
<li><a href="http://lohssoftball.com/" target="_blank">Lake Orion High School Softball</a></li>
<li><a href="http://www.loybl.com/default.aspx" target="_blank">Lake Orion Baseball League</a></li>
<li><a href="http://www.eteamz.com/lodragonsyouthfootball/" target="_blank">Lake Orion Dragons Youth Football & Cheer</a></li>
<li><a href="http://www.lodragonfootball.com/" target="_blank">Lake Orion Dragons Football</a></li>
<li><a href="http://rp.lakeorion.k12.mi.us/Default.aspx?id=4" target="_blank">Lake Orion Comunity Sports</a></li>
</ul>
</div>
<div class="span6">
<h2>News & Events</h2>
<button class="btn btn-large btn-block btn-success btn-header dragon-news" type="button">Dragons News</button>
<div class="news">
<p>2013 Chargers First Team Indoor Practice @ Baseball City on Jan 31, see coaches for schedules<br />
2013 Orion Chargers Classic Scheduled for 7/12 - 7/14<br />
2012 Orion Chargers Classic Info - July 6 / 7 / 8, 2012<br />
Thanks to Buffalo Wild Wings - Orion Charger Fundraising Day a GREAT success!<br />
Thanks to GM, Fox Chevrolet and Chevy Youth Baseball for your great support and wonderful Comerica Park event!</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 9u" type="button">9U Team</button>
<div class="news">
<p>Congrats on winning Chargers Classic! Great job boys!<br />
Hear Glenn S got his cast off - back on the fields soon!<br />
Last Game: Won Chargers Classic!<br />
Next game: TBD - Makeup game vs LO Dragons.</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 10u" type="button">10U Team</button>
<div class="news">
<p>Last Game: Beat Detroit Jets in AABC Regional!<br />
Next game: 2013 Season</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 11u" type="button">11U Team</button>
<div class="news">
<p>Congrats 11u - 2013 NOBF Champions!
Last Game: Beat Troy Titans 10-9<br />
Next game: AABC Regionals - TBD</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 12u" type="button">12U Team</button>
<div class="news">
<p>Great trip to Cooperstown Chargers - truly something to remember for years to come!<br />
Congrats on 1st round playoff win!</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 13u" type="button">13U Team</button>
<div class="news">
<p>Last Game: Lost vs Michigan Red Sox 10- 5.<br />
Next Game: 7/17 makeup game.</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 14u" type="button">14U Team</button>
<div class="news">
<p>No news.</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 15u" type="button">15U Team</button>
<div class="news">
<p>Wishing JJ Schomer a speedy recovery.</p>
</div>
<button class="btn btn-large btn-block btn-success btn-header 16u" type="button">16U Team</button>
<div class="news">
<p>Info / Schedule soon!</p>
</div>
</div>
<div class="span3">
<h2>Sponsors</h2>
<ul>
<li><a href="http://www.billfoxchevrolet.com/" target="_blank" style="z-index:999;">Bill Fox Chevrolet</a></li>
<li><a href="http://www.chevroletbaseball.com/" target="_blank">Chevrolet Youth Baseball</a></li>
<li><a href="http://www.transpak.com/" target="_blank">Transpak</a></li>
<li><a href="http://www.golden-meadows.com/#/content/start/" target="_blank">Golden Meadows</a></li>
<li><a href="http://www.dickssportinggoods.com/home/index.jsp" target="_blank">Dick's Sporting Goods</a></li>
<li><a href="http://www.bluesombrero.com/" target="_blank">Blue Sombrero</a></li>
<li><a href="http://www.statewire.com/" target="_blank">State Wire and Terminal Inc</a></li>
<li><a href="http://www.eprint-online.com/" target="_blank">ePrint Solutions</a></li>
<li><a href="http://www.westconstruction.com/" target="_blank">West Construction</a></li>
<li><a href="http://www.thelafayettemarket.com/" target="_blank">Lafayette Markets</a></li>
<li><a href="http://www.allstatetree.net/" target="_blank">All State Tree and Lawn</a></li>
<li><a href="http://www.promartialarts.com/" target="_blank">Pro Martial Arts</a></li>
<li><a href="http://www.belfor.com/" target="_blank">Balfor USA Group, Inc</a></li>
<li><a href="http://www.ally.com/" target="_blank">Ally</a></li>
<li><a href="http://www.michigan-telephone.com/" target="_blank">Michigan Telephone</a></li>
<li><a href="http://www.ewsmullins.com/webpage.html" target="_blank">Environmental Wood Solutions</a></li>
<li><a href="http://www.graphicwhizard.com/" target="_blank">Graphic Wizard</a></li>
<li><a href="http://www.dairyqueen.com/" target="_blank">Lake Orion Dairy Queen</a></li>
<li><a href="http://www.tricountysportsus.com/" target="_blank">Tri-County Custom Sports</a></li>
<li><a href="http://www.tinamarshalldds.com/" target="_blank">Dr Tina Marshall - DDS</a></li>
<li><a href="http://www.wesselspainting.com/" target="_blank">Wessel's Painting Inc</a></li>
<li><a href="http://www.gspizzeria.com/zgrid/themes/10243/portal/index.jsp" target="_blank">G's Pizzeria & Deli</a></li>
<li><a href="http://www.hydra-flex.com/" target="_blank">Hydra-Flex</a></li>
<li><a href="http://www.frenzyagency.com/" target="_blank">EPK Agency</a></li>
<li><a href="http://www.buffalowildwings.com/" target="_blank">Buffalo Wild Wings</a></li>
<li><a href="http://www.gollingbuickgmc.com/" target="_blank">Golling Buick / GMC</a></li>
<li><a href="http://www.hqpt.com/" target="_blank">HealthQuest</a></li>
</ul>
</div>
</div>
<hr />
<div class="footer">
<p>© Company 2013</p>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/navigation.js"></script>
<script src="js/index-button-links.js"></script>
</body>
赞助 CSS
.span3 {
z-index:99999 !important;
}
最佳答案
注意:z-index 仅适用于定位元素(position:absolute、position:relative 或 position:fixed)。
关于html - z-index !important 对我的 div 没有任何作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16319936/