CSS元素相互渗透
我的CSS有一个非常大的问题：
问题：文本正在流入标题元素，标题元素是固定的，应该像导航栏那样重叠，特别是用@media规则“仅屏幕观察”和（min-宽度：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&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>
2 个答案:
答案 0 :(得分：1)
在JSFiddle中查看代码之后，它只是一个z-index问题，其中内容覆盖了标题选项卡。如果您将z-index: 5;添加到.content，z-index: 10;添加到.header。
z-index定义对象的“分层”。较低的数字是“低于”z-index个较高的数字。
答案 1 :(得分：0)
是的，因为你使用position: absolute;作为标题，晴雨表和金融而流血。您可以对每个元素使用display: inline-block或float: left。
也许它可以帮到你
http://learnlayout.com/inline-block.html
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？