叠加不包括溢出：滚动;模态不固定

时间：2016-08-28 02:07:52

标签： css

演示：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的整个可滚动区域？

1 个答案:

答案 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(&#39;valForSchedule&#39;));WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnAdd&quot;, &quot;&quot;, true, &quot;valForSchedule&quot;, &quot;&quot;, 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

相关问题
最新问题