html - CSS 元素相互渗透

Question

我的 CSS 遇到一个非常大的问题:

问题:文本渗入标题元素，该元素是固定的，并且应该像导航栏一样重叠，特别是通过 @media 规则“仅屏幕和(最小-宽度:320px)和(最大宽度:568px)”

我希望它整齐地隐藏在元素下方，我已将其设置为像导航栏一样固定。

如果有帮助，这里是一个代码片段:

                @media all {
                  body {
                    font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
                  }
                  @media screen and (min-width: 1240px) {
                    body {
                      font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
                    }
                    .header-container {
                      position: relative;
                      font-size: 72px;
                      height: 1em;
                    }
                    .header {
                      position: absolute;
                      display: block;
                      font-size: 72px;
                      top: 0px;
                      left: 0px;
                      width: 100%;
                      height: 1em;
                      background-color: rgba(255, 255, 255, 1);
                      display: table;
                    }
                    .header_img {
                      height: 1em;
                      text-align: left;
                      top: 50%;
                      left: 5px;
                      width: auto;
                      margin: 0;
                      transform: translate(0%, 0%);
                    }
                    .enter_sale {
                      background: rgba(19, 134, 129, 1);
                      position: absolute;
                      top: 0em;
                      left: 0%;
                      height: 1.01em;
                      width: 33%;
                      color: white;
                    }
                    .barometer {
                      background: rgba(172, 24, 117, .8);
                      position: absolute;
                      top: 0em;
                      left: 33%;
                      height: 1.01em;
                      width: 33%;
                      color: white;
                    }
                    .barometer:hover {
                      background: rgba(172, 24, 117, 1);
                    }
                    .finance {
                      background: rgba(220, 118, 31, .8);
                      position: absolute;
                      top: 0em;
                      left: 66%;
                      height: 1.01em;
                      width: 34%;
                      color: white;
                    }
                    .finance:hover {
                      background: rgba(220, 118, 31, 1);
                    }
                    .content {
                      position: absolute;
                      font-size: 72px;
                      display: block;
                      top: 1em;
                      left: 12.5%;
                      height: auto;
                      width: 75%;
                      padding: .1em;
                      border-left: solid;
                      border-right: solid;
                      border-color: rgba(19, 134, 129, 1);
                    }
                    .enter_sale_text {
                      text-align: center;
                      position: absolute;
                      top: 50%;
                      left: 80px;
                      height: auto;
                      width: auto;
                      margin: 0;
                      transform: translate(0%, -50%);
                      font-size: 60px;
                    }
                    .barometer_text {
                      text-align: center;
                      position: absolute;
                      top: 50%;
                      left: 80px;
                      height: auto;
                      width: auto;
                      margin: 0;
                      transform: translate(0%, -50%);
                      font-size: 60px;
                    }
                    .finance_text {
                      text-align: center;
                      position: absolute;
                      top: 50%;
                      left: 80px;
                      height: auto;
                      width: auto;
                      margin: 0;
                      transform: translate(0%, -50%);
                      font-size: 60px;
                    }
                    .content_newrules {
                      font-size: 14px;
                    }
                  }
                  @media only screen and (min-width: 320px) and (max-width: 568px) {
                    .header-container {
                      position: relative;
                      font-size: 72px;
                      height: 1em;
                    }
                    .content {
                      position: absolute;
                      font-size: 72px;
                      display: block;
                      top: 1em;
                      height: auto;
                      width: 94%;
                      padding: .1em;
                      border-color: rgba(19, 134, 129, 1);
                    }
                    .header {
                      position: fixed;
                      font-size: 72px;
                      top: 0px;
                      left: 0px;
                      width: 100%;
                      height: 1em;
                    }
                    .header_img {
                      display: block;
                      height: 100%;
                      width: auto;
                      margin-left: auto;
                      margin-right: auto;
                      /*transform: translate(0%, -50%);*/
                      font-size: 60px;
                    }
                    .enter_sale {
                      background-color: #9C2329;
                      /*text-align: center;*/
                      position: absolute;
                      top: 0em;
                      left: 0%;
                      height: 1.01em;
                      width: 33%;
                      color: white;
                    }
                    .barometer {
                      background: #27821D;
                      /*text-align: center;*/
                      position: absolute;
                      top: 0em;
                      left: 33%;
                      height: 1.01em;
                      width: 33%;
                      color: white;
                    }
                    .barometer:hover {
                      background: rgba(172, 24, 117, 1);
                    }
                    .finance {
                      background: #307CA9;
                      /*text-align: center;*/
                      position: absolute;
                      top: 0em;
                      left: 66%;
                      height: 1.01em;
                      width: 34%;
                      color: white;
                    }
                    .enter_sale_text {
                      display: none;
                      /*text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;*/
                    }
                    .barometer_text {
                      display: none;
                      /*text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;*/
                    }
                    .finance_text {
                      display: none;
                      /*text-align: center;
                        position: absolute;
                        top: 50%;
                        left: 80px;
                        height: auto;
                        width: auto;
                        margin: 0;
                        transform: translate(0%, -50%);
                        font-size: 60px;*/
                    }
                    .content_newrules {
                      font-size: 14px;
                    }
                  }

<body onload="lookup_zip('init')">
  <script type="text/javascript" src="resources/enter_sale.js">
  </script>
  <div class="header_container">
    <span class="header">
            <span class="enter_sale">
                <img src="resources/enter_sale.png" class="header_img"></img>
                <span class="enter_sale_text">
                    Enter Sale
                </span>
    </span>
    <span class="barometer">
                <img src="resources/barometer.png" class="header_img"></img>
                <span class="barometer_text">
                    Dashboard
                </span>
    </span>
    <span class="finance">
                <img src="resources/finance.png" class="header_img"></img>
                <span class="finance_text">
                    Finance
                </span>
    </span>
    </span>
  </div>
  <div class="content">
    <span class="content_newrules">
                <h3>
                    Sales Represenative(s)
                </h3>
            <form action="resources/submit_form.php" method="post">
                Sales Representative: <select id="sales_rep" onchange="checkForm()"  name="sales_rep">
                    <option selected="selected" name="no_select" value="">Select a Rep</option>
                    <option name="Kerry Kennicutt">Kerry Kennicutt</option>
                    <!-- The rest are to be determined by PHP -->
              </select>
              </br>
                <span id="secondary_sales_rep_container">
                    <a href="javascript:add_secondary_sales_rep()">Add a secondary sales rep... </a>
                    </br>
                </span>
    <!-- </br> -->
    <h3>
                    Customer Information
                </h3>
    <!-- </br> -->
    <!-- Note: The following textbox uses CSS to ensure that all the entered characters are UPPERCASE -->
    First Name:
    <input type="text" id="c_first_name" name="c_first_name" style="text-transform: uppercase;" onchange="validate_text(1)">
    </br>
    Last Name:
    <input type="text" id="c_last_name" name="c_last_name" style="text-transform: uppercase;" onchange="validate_text(2)">
    </br>
    Street Address:
    <input type="text" id="c_address" name="c_address" style="text-transform: uppercase;" onchange="validate_text(3)">
    </br>
    Zip Code:
    <input type="text" id="c_zip" name="c_zip" style="text-transform: uppercase" onchange="lookup_zip()">
    </br>
    City/St: <span id="cityst"><!-- This information will be filled in by function lookup_zip() --></span>
    </br>
    <h3>
                    Deal Information
                </h3>
    <!-- </br> -->
    Deal Number:
    <input type="text" id="deal_number" name="deal_number">
    </br>
    Stock Number:
    <input type="text" id="deal_stock_number" name="deal_stock_number">
    </br>
    Selling Model:
    <input type="text" id="deal_selling_model" name="deal_selling_model" style="text-transform: uppercase;">
    </br>
    Trade in 1 Model:
    <input type="text" id="deal_trade_in_model_1" name="deal_trade_in_model_1" style="text-transform: uppercase;">
    </br>
    Trade in 1 Amount:
    <input type="text" id="deal_trade_in_amount_1" name="deal_trade_in_amount_1" onchange="picky_currency('deal_trade_in_amount_1')">
    </br>
    <span id="second_tradein">
                <a href="javascript:show_tradein_2()">
                    There's more than one trade in...
                </a>
                </span>
    </br>
    New/Used:
    <select name="deal_new_status">
      <option>New</option>
      <option>Used</option>
    </select>
    </br>
    D&amp;H:
    <input type="text" id="deal_dh" name="deal_dh" onchange="picky_currency('deal_dh')">
    </br>
    Finance Amount:
    <input type="text" id="deal_finance_amount" name="deal_finance_amount" onchange="picky_currency('deal_finance_amount')">
    </br>
    Pack Amount:
    <input type="text" id="deal_pack" name="deal_pack" onchange="picky_currency('deal_pack')">
    </br>
    Retro Amount:
    <input type="text" id="deal_retro" name="deal_retro" onchange="picky_currency('deal_retro')">
    </br>
    Holdback Amount:
    <input type="text" id="deal_holdback" name="deal_holdback" onchange="picky_currency('deal_holdback')">
    </br>
    </br>
    <input type="checkbox" id="finance_toggle" onchange="show_finance_information()">I want to add financing information now.
    <span id="finance_information" style="display:none;">
                </br>
                </br>
                Reserve Amount: <input type="text" id="deal_reserve_amount" name="deal_reserve_amount" onchange="picky_currency('deal_reserve_amount')">
                </br>
                Warrantee Amount: <input type="text" id="deal_warrantee" name="deal_warrantee" onchange="picky_currency('deal_warrantee')">
                </br>
                Gap Amount: <input type="text" id="deal_gap" name="deal_gap" onchange="picky_currency('deal_gap')">
                </br>
                Etch Amount: <input type="text" id="deal_etch" name="deal_etch" onchange="picky_currency('deal_etch')">
                </br>
                Maintenence Amount: <input type="text" id="deal_maintenence" name="deal_maintenence" onchange="picky_currency('deal_maintenence')">
                </br>
                Gross Amount: <input type="text" id="deal_gross" name="deal_gross" onchange="picky_currency('deal_gross')">
                </br>
                </span>
    </br>
    </br>
    <input type="submit" value="Confirm Sales Information">
    </form>
  </div>
  </span>

Answer 1

在 JSFiddle 中查看代码后，这只是一个 z-index 问题，其中内容覆盖了标题选项卡。如果您将 z-index: 5; 添加到您的 .content 并将 z-index: 10; 添加到您的 .header.

z-index 定义对象的“分层”。较低的数字位于较高的 z-index 数字“之下”。

JSFiddle