0

この野球の画像を背景、スポンサー リストの後ろに配置したいと思います。z-indexしかし、スポンサー リンクとスポンサー ヘッダーにハイを適用しても、何も起こりません。

z-index野球にネガを付けようとすると、メインのコンテナの後ろになります。次に、メイン コンテナにさらに低いコンテナを追加しようとしましz-indexたが、ナビゲーションが壊れました。

またはz-indexに適用すると機能しないのはなぜですかh2a

野球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 &amp; 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>&copy; 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;
}
4

1 に答える 1

4

注: z-index は、配置された要素 ( position:absolute, position:relative, or position:fixed) でのみ機能します。

于 2013-05-01T14:25:58.703 に答える