我有一个网页正在尝试实现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&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&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/