演示：http://jsbin.com/zijisaxoke/1/edit?html,css,output
我有一个可滚动的容器，里面有一个内容div（假设内容div的可变宽度）。但是，容器的固定宽度为100％（也可能会改变）。
我还有一个模态，它有一个绝对定位的灰色叠加层。我的目标是使灰色覆盖层覆盖容器的整个可滚动内容，但是现在它只覆盖了初始视口大小。我也想让模态本身固定在容器的左上方，无论滚动位置如何，但看起来position: fixed不尊重父position: relative。
.container {
position: relative;
width: 100%;
height: 200px;
background-color: red;
overflow: scroll;
}
.content {
width: 2000px;
height: 300px;
}
.overlay {
z-index: 200;
position: absolute;
opacity: 0.7;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
}
.modal {
z-index: 500;
position: fixed;
width: 300px;
background-color: green;
top: 0;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="stuff">hi</div>
<div class="container">
<div class="content">aaa</div>
<div class="overlay"></div>
<div class="modal">Hello</div>
</div>
</body>
</html>
如何将模态相对固定在容器内，并保持叠加层覆盖div的整个可滚动区域？
答案 0 :(得分：1)
这是一个JS解决方案：
<span class="left tooltip_link"><a href="#" class="tooltip-right" data-tooltip="Not used in timetable, purely used for search purposes later"><i class="fa fa-question-circle"></i></a></span>
</td>
</tr>
<tr>
<td class="text-right" width="200">
<label for="ContentPlaceHolder1_txtDescription" id="ContentPlaceHolder1_lblDescription">Description : </label>
</td>
<td>
<input name="ctl00$ContentPlaceHolder1$txtDescription" type="text" value="290802016 " maxlength="200" id="ContentPlaceHolder1_txtDescription" title="Enter Description" class="left" style="width:150px;" />
<span class="left tooltip_link"><a href="#" class="tooltip-right" data-tooltip="Not used in timetable, purely used for search purposes later"><i class="fa fa-question-circle"></i></a></span>
</td>
</tr>
</table>
</div>
<div class="clear">
<span id="ContentPlaceHolder1_rfvFileName" class="FontClass" style="display:none;"></span>
<span id="ContentPlaceHolder1_rfvValidFileName" class="FontClass" style="display:none;"></span>
<span id="ContentPlaceHolder1_rfvDesc" class="FontClass" style="display:none;"></span>
<span id="ContentPlaceHolder1_rfvValidDescription" class="FontClass" style="display:none;"></span>
</div>
</div>
</div>
<div class="mar-bot-10 clear">
<input type="submit" name="ctl00$ContentPlaceHolder1$btnAdd" value="Save" onclick="DataTool.ValidateAndToggleVisiblity(Page_ClientValidate('valForSchedule'));WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$btnAdd", "", true, "valForSchedule", "", false, false))" id="ContentPlaceHolder1_btnAdd" title="Click to add new schedule" class="btn-clear" />
<input type="submit" name="ctl00$ContentPlaceHolder1$btnReset" value="Reset" id="ContentPlaceHolder1_btnReset" class="btn-clear" />
</div>
|0|hiddenField|__EVENTTARGET||0|hiddenField|__EVENTARGUMENT||452|hiddenField|__VIEWSTATE|/wEPBbgCSDRzSUFBQUFBQUFFQVB2UHlNL0thV2x1YW1CbWJHUm96cDhpeHBRR0lwZ1lnYVJBR3I4WWt4eG5abDVlYWxGR1NXNE9xNWROY1VsUmZsNjZuWDlBaUdkd3ZHTktibWFlalQ1VVRLRkd3U1pSSWFNb05jMVdYVmxkSVQ4dk9TY3pPZHRXM1NjLzNiKzBSRVBUV3QwT3lGUUFzbTMwRSsxU21KaEJock9BMUxQS1pwU1VGRmpwNjJjbUp4YVZGaGNVNk9VWGxHUVdKeFlVRk9zbDUrZW1NQW1CbExLSFpSWm5KdVdrWnFRd0NRUDU4a3pwS1V4eU1JWUNqS0VJWTZoQ3ZRRzJKU1Mxb29SVnhMa29OYkVrVmNIVktUaElJVGc1SXpXbE5DYzFKUVVBY3dqaFdRSUJBQUE9ZBpxCDqRIEungR80i/4HRMqKquCH|8|hiddenField|__VIEWSTATEGENERATOR|29933832|0|asyncPostBackControlIDs|||0|postBackControlIDs|||72|updatePanelIDs||tctl00$ContentPlaceHolder1$UpdatePanel1,ContentPlaceHolder1_UpdatePanel1|0|childUpdatePanelIDs|||71|panelsToRefreshIDs||ctl00$ContentPlaceHolder1$UpdatePanel1,ContentPlaceHolder1_UpdatePanel1|4|asyncPostBackTimeout||3600|18|formAction||./AddSchedule.aspx|12|pageTitle||Add Schedule|57|arrayDeclaration|Page_ValidationSummaries|document.getElementById("ContentPlaceHolder1_vldSummary")|58|arrayDeclaration|Page_Validators|document.getElementById("ContentPlaceHolder1_rfvFileName")|63|arrayDeclaration|Page_Validators|document.getElementById("ContentPlaceHolder1_rfvValidFileName")|54|arrayDeclaration|Page_Validators|document.getElementById("ContentPlaceHolder1_rfvDesc")|66|arrayDeclaration|Page_Validators|document.getElementById("ContentPlaceHolder1_rfvValidDescription")|194|scriptBlock|ScriptPath|/data/ScriptResource.axd?d=PIkWxDViaZE5PI1d5VC9u3oaIGXTi2MiwQcE00IlXrZtNMOjZbsuJ0QIWWw4HReSlnuBaIUBUZZbJyN_wtr3SycmM_LR-6SrO9qBExQmsX44PlsjganwUlmgp8zJhCIB2B9n40PUePHmOsGPVqSntMHbDWA1&t=1c6690ce|267|scriptStartupBlock|ScriptContentNoTags|
(function(id) {
var e = document.getElementById(id);
if (e) {
e.dispose = function() {
Array.remove(Page_ValidationSummaries, document.getElementById(id));
}
e = null;
}
})('ContentPlaceHolder1_vldSummary');
|281|scriptStartupBlock|ScriptContentNoTags|
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
|184|scriptStartupBlock|ScriptContentNoTags|
document.getElementById('ContentPlaceHolder1_rfvFileName').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_rfvFileName'));
}
|194|scriptStartupBlock|ScriptContentNoTags|
document.getElementById('ContentPlaceHolder1_rfvValidFileName').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_rfvValidFileName'));
}
|176|scriptStartupBlock|ScriptContentNoTags|
document.getElementById('ContentPlaceHolder1_rfvDesc').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_rfvDesc'));
}
|200|scriptStartupBlock|ScriptContentNoTags|
document.getElementById('ContentPlaceHolder1_rfvValidDescription').dispose = function() {
Array.remove(Page_Validators, document.getElementById('ContentPlaceHolder1_rfvValidDescription'));
}
|90|onSubmit||if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;|6|expando|document.getElementById('ContentPlaceHolder1_vldSummary')['displaymode']|"List"|16|expando|document.getElementById('ContentPlaceHolder1_vldSummary')['validationGroup']|"valForSchedule"|37|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['controltovalidate']|"ContentPlaceHolder1_txtScheduleName"|3|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['focusOnError']|"t"|27|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['errormessage']|"Schedule name is required"|6|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['display']|"None"|16|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['validationGroup']|"valForSchedule"|39|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['evaluationfunction']|"RequiredFieldValidatorEvaluateIsValid"|2|expando|document.getElementById('ContentPlaceHolder1_rfvFileName')['initialvalue']|""|37|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['controltovalidate']|"ContentPlaceHolder1_txtScheduleName"|3|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['focusOnError']|"t"|129|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['errormessage']|"Schedule name should only contain \u0027_\u0027 as special character and alpha numeric values with max lenght of 50 characters."|6|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['display']|"None"|16|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['validationGroup']|"valForSchedule"|43|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['evaluationfunction']|"RegularExpressionValidatorEvaluateIsValid"|23|expando|document.getElementById('ContentPlaceHolder1_rfvValidFileName')['validationexpression']|"^[A-Za-z0-9 _]{1,50}$"|36|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['controltovalidate']|"ContentPlaceHolder1_txtDescription"|3|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['focusOnError']|"t"|25|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['errormessage']|"Description is required"|6|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['display']|"None"|16|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['validationGroup']|"valForSchedule"|39|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['evaluationfunction']|"RequiredFieldValidatorEvaluateIsValid"|2|expando|document.getElementById('ContentPlaceHolder1_rfvDesc')['initialvalue']|""|36|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['controltovalidate']|"ContentPlaceHolder1_txtDescription"|3|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['focusOnError']|"t"|128|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['errormessage']|"Description should only contain \u0027_\u0027 as special character and alpha numeric values with max lenght of 200 characters."|6|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['display']|"None"|16|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['validationGroup']|"valForSchedule"|43|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['evaluationfunction']|"RegularExpressionValidatorEvaluateIsValid"|24|expando|document.getElementById('ContentPlaceHolder1_rfvValidDescription')['validationexpression']|"^[A-Za-z0-9 _]{1,200}$"|
和相应的JS Bin： http://jsbin.com/xahehodeqe/3/edit?html,css,js,console,output