我有一个网页正在尝试实现CSS覆盖。为了实现这一点,我使用了<div class="overlay"></div>,它将使用背景图像进行叠加效果,并使用<div class="overlay-box"></div>表示弹出内容本身。我现在不需要打开和关闭弹出功能,默认情况下,我只希望页面加载时具有叠加效果。

我使用的HTML是:

<div id="wrapper">
    <div class="sidebar">
        <a class="cf-logo"><img src="images/cf-logo.png" alt="Casting Frontier" /></a>
        <ul class="nav">
            <li><a href="#">Projects</a></li>
            <li>
            <select>
                <option value="Quick Jump...">Quick Jump...</option>
                <option value="Quick Jump...">Quick Jump...</option>
                <option value="Quick Jump...">Quick Jump...</option>
            </select><br />
            <a href="#">Status</a></li>
            <li><a href="#">Sides</a></li>
            <li><a href="#">Mail</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Preferences</a></li>
            <li><a href="#">Suggestion Box</a></li>
            <li><a href="#">Tools</a></li>
            <li><a href="#">Logout</a></li>
            <li>
                <select>
                    <option value="Quick Search">Quick Search:</option>
                    <option value="Quick Search">Quick Search:</option>
                    <option value="Quick Search">Quick Search:</option>
                </select>
            </li>
        </ul>
    </div><!-- end sidebar -->
    <div class="main-content">
        <h2>Breakdowns - Activia</h2>
        <ul id="tabs-menu" class="menu">
            <li><a href="#overview-content">Overview</a></li>
            <li><a href="#roles-content">Roles (6)</a></li>
            <li class="active"><a href="#breakdowns-content">Breakdowns (1)</a></li>
            <li><a href="#schedules-content">Schedules (0)</a></li>
            <li><a href="#notes-content">Notes</a></li>
            <li><a href="#printReports-content">Print Reports</a></li>
            <li><a href="#history-content">History</a></li>
        </ul>

        <div id="overview-content" class="content">
            Overview
        </div><!-- end content -->
        <div id="roles-content" class="content">
            Roles
        </div><!-- end content -->
        <div id="breakdowns-content" class="content">
            <table class="break-table">
                <tr class="tc-head">
                    <th class="tc1">Breakdown</th>
                    <th class="tc2">Sent At</th>
                    <th class="tc3"></th>
                </tr>
                <tr class="tc-body">
                    <td class="tc1">First Breakdown</td>
                    <td class="tc2">10/04/13 02:59 PM</td>
                    <td class="tc3"><a href="#" class="print-btn">Print</a></td>
                </tr>
            </table>

            <div class="overlay-box">
                <div class="overlay-head">
                    <a class="print-blue" href="#" onclick="window.print()">Print</a>
                </div>
                <div class="overlay-content">
                    <h3>AT&amp;T</h3>
                    <span class="overlay-title">Plaster Casting 323-465-9999</span>
                    <div class="heading-bg">
                        <h4>Job Information</h4>
                    </div>

                    <table class="info-table1">
                        <tr>
                            <td class="icol1"><strong>Name:</strong></td>
                            <td class="icol2">AT&amp;T</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Casting Company:</strong></td>
                            <td class="icol2">Plaster Casting</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Project Type:</strong></td>
                            <td class="icol2">Commercial</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Union Status:</strong></td>
                            <td class="icol2">SAG-AFTRA</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Conflicts:</strong></td>
                            <td class="icol2">Wireless Communications,cell</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Rate:</strong></td>
                            <td class="icol2">SAG SCALE</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Director:</strong></td>
                            <td class="icol2">John Smith</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Producer:</strong></td>
                            <td class="icol2">Sara Johnson</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Production Company:</strong></td>
                            <td class="icol2">Smugler</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Prouction Company Ph#:</strong></td>
                            <td class="icol2">323-323-3232</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Agency:</strong></td>
                            <td class="icol2">RPA</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Agency Producer:</strong></td>
                            <td class="icol2">Brian Thompson</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Agency Producer Ph#:</strong></td>
                            <td class="icol2">818-818-8181</td>
                        </tr>
                    </table>

                    <table class="info-table2">
                        <tr>
                            <td class="icol1"><strong>Audition Location:</strong></td>
                            <td class="icol2">Casting Underground</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Audition Address:</strong></td>
                            <td class="icol2">1641 N.lvar Ave., Los Angeles CA 900208</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Audition Dates:</strong></td>
                            <td class="icol2">08/03/2013, 08/04/2013</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Callback Location:</strong></td>
                            <td class="icol2">Casting Underground</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Callback Address:</strong></td>
                            <td class="icol2">1641 N.lvar Ave., Los Angeles</td>
                        </tr>
                        <tr><td><br /></td></tr>
                        <tr>
                            <td class="icol1"><strong>Callback Dates:</strong></td>
                            <td class="icol2">07/31/2013, 8/1/13, 8/2/13</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Submissions due by:</strong></td>
                            <td class="icol2">noon tomorrow</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Submission note:</strong></td>
                            <td class="icol2">please no double submissions</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Shoot dates:</strong></td>
                            <td class="icol2">08/14/13, 08/15/13</td>
                        </tr>
                        <tr>
                            <td class="icol1"><strong>Shoot City:</strong></td>
                            <td class="icol2">Los Angeles</td>
                        </tr>
                    </table>

                    <h5>Run:</h5>
                    <p>
                        30 promo spot wil run network, cable, industrial, internet only airing ABC+ ESPN
                        60 will run cable, Internet, industrial only airing ESPN
                    </p>

                    <h5>Project Notes:</h5>
                    <p>
                        some roles will be double scale - we might not know until edits. Double scale is for exclusivity for all corporate messaging and competitive advertising for the folowing: a;; telecommunications (including wired and wireless telecomunications), comunication device hardware
                        and software (including but not limited to smartphones, tablets, smartphone.tablets,;a[ docks, or netbooks), computer hardware and software, and any programming services that compete with U-verse. This exclusivity covers competitive advertising by IBM, Microsoft, CIsco,
                        HP,Verizon,Charter, Cox Communications, Comcast, Time Warner, Aple,DirecTV, Dish, Verizon FiOS, T-Mobile, and Sprint.
                    </p>

                    <div class="roles">
                        <div class="heading-bg">
                            <h4>Roles (5)</h4>
                        </div>

                        <div class="roles-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>
                        <div class="roles-box gray-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>

                        <div class="roles-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>
                        <div class="roles-box gray-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>

                        <div class="roles-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>
                        <div class="roles-box gray-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>

                        <div class="roles-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>
                        <div class="roles-box gray-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>

                        <div class="roles-box">
                            <h5>(12) Factory Worker / Male / african American, Asian, Caucasian, Hispanic, Middle Eastern, Multi-Ethnic, Native American, East Indian, Pacific Islander, Ambigious / 30-50</h5>
                            <p>
                                Comedic actors can pull of a cinematic performance doing very little. THey are a little quirkier than normal looking. they need to lok like they have been working
                                at a factory for anywhere between 10-30 years
                            </p>
                            <p class="role-extras">
                                <span class="attire"><strong>Attire:</strong> Modern Factory Coveralls or Jumpsuits</span>
                                <span class="role-added">Role added at: <span class="role-date">07/30/13 12:18PM</span></span>
                            </p>
                        </div>

                    </div><!-- end roles -->
                </div><!-- end overlay-content -->
            </div><!-- end overlay -->
        </div><!-- end content -->
        <div id="schedules-content" class="content">
            Schedules
        </div><!-- end content -->
        <div id="notes-content" class="content">
            Notes
        </div><!-- end content -->
        <div id="printReports-content" class="content">
            Print Reports
        </div><!-- end content -->
        <div id="history-content" class="content">
            History
        </div><!-- end content -->


    </div><!-- end main-content -->
    <div class="overlay"></div>
</div>


我正在使用的CSS是:

.overlay {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:120%;
    z-index:998;
    background: url(images/overlay.png) repeat;
    display: none;
    display: block;
    min-width: 1100px;
}


.overlay-box{
    width: 700px;
    height: 600px;
    margin: 0 auto;
    position: absolute;
    background: #fff url(images/overlay-bg.png) repeat-x;
    left: 400px;
    top: 50px;
    display: none;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 1px -2px 2px 3px #43484b;
    box-shadow: 0px -1px 4px 2px #43484b;
    display: block;
    overflow: auto;
}

最佳答案

将.overlay-box设置为z-index:999或更高应该可以解决您的问题。

关于jquery - CSS叠加层-叠加层位于弹出窗口的顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19231668/

10-13 00:35