divcontainerには、複数の子div要素が含まれています。これらの子のうち、divは、top_barという名前の最上位のものはposition: fixed、その他のものはposition: relativeです。問題は、相対的な位置付けを持つdivが固定された位置付けのdivと重なっていることです。問題の概要はjsfiddleです。これを修正するにはtop:150pxを追加することができましたが、これはハックのように感じます。これを行うより良い方法はありますか？位置が固定で相対的なdivの重複
padding-top:120px;~containerおよびtop:0;~top_bar以下のdivにdivはオーバーバーにはなりません。
html, body {
height:100%;
}
.container {
text-align: center;
width:100%;
margin:0%;
padding:120px 0 0;
color: dodgerblue;
}
.top_bar{
box-shadow: 0px 5px 5px #DDD;
position: fixed;
z-index: 10000;
opacity: .95;
background-color:#f9f9f9;
width:100%;
top:0;
}
.mugoogle{
font-size: 22px;
font-family: Arial;
margin: 10px auto;
}
.mugoogle a, .tab_results a {
text-decoration:none;
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
}
.mugoogle a:hover{
color: #aaa;
}
.tab_results a:hover {
text-decoration:underline;
color: #000
}
.textbox{
margin: 0px auto;
height:30px;
width:60%;
}
.rounded {
\t border-radius:5px;
\t -moz-border-radius:5px;
\t -webkit-border-radius:5px;
}
/* h4{
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
*/
input[type="submit"] {
height: 30px;
}
input[type="text"] {
border: 1px solid #ccc;
margin: 10px;
padding: 5px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
input[type="text"]:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.button {
\t display: inline-block;
\t outline: none;
\t cursor: pointer;
\t text-align: center;
\t text-decoration: none;
width: 40px;
\t font: 14px/100% "Century Gothic", Arial, Helvetica, sans-serif;
\t /* padding: .5em 2em .55em; */
\t text-shadow: 0 1px 1px rgba(0,0,0,.3);
\t -webkit-border-radius: .5em;
\t -moz-border-radius: .5em;
\t border-radius: .5em;
\t -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
\t -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
\t box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
\t text-decoration: none;
}
.button:active {
\t position: relative;
\t top: 1px;
}
.blue {
\t color: #d9eef7;
\t border: solid 1px #0076a3;
\t background: #0095cd;
\t background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
\t background: -moz-linear-gradient(top, #00adee, #0078a5);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
\t background: #007ead;
\t background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
\t background: -moz-linear-gradient(top, #0095cc, #00678e);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
\t color: #80bed6;
\t background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
\t background: -moz-linear-gradient(top, #0078a5, #00adee);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.project_data{
text-align:left;
width: 1000px;
position:relative;
padding: 5px;
word-wrap:break-word;
margin:0 auto;
font-family: Calibri;
font-size: 18px;
color: #555;
}<div class = "container">
<div class = "top_bar">
<h4 class = 'mugoogle'>
<a href = '/search/'>
muGoogle
</a>
</h4>
<form class="form-wrapper" method = "GET" action = "{% url 'doc_scorer'%}">
<input type="text" name = 'query' class="textbox rounded" placeholder="Search docs related to..." required>
<input type="submit" class="button blue" value="🔎">
</form>
<br>
</div>
<br>
<div class = 'project_data project_name'>
<strong>Project name: </strong>
</div>
<div class = 'project_data scq_title'>
<strong>SGQ: </strong>
</div>
<div class = 'project_data situation'>
<strong>Situation: </strong>
</div>
<div class = 'project_data future_state'>
<strong>Future State: </strong>
</div>
<div class = 'project_data complications'>
<strong>Complications: </strong>
</div>
<div class = 'project_data questions'>
<strong>Questions: </strong>
</div>
<div class = 'project_data data'>
<strong>Data: </strong>
</div>
<div class = 'project_data name'>
<strong>Name: </strong>
</div>
<br>
<br>
</div>あなたが言及リンクの下に確認することができますので、あなたは、このダイナミックにしたい場合：
https://jsfiddle.net/06vzbuf0/2/
を私はこの問題を解決するためにjQueryを使用しました。
これはハックではありません。要素の位置を固定すると、効果的にドキュメントレイアウトから取り除かれ、他の要素（静的または相対）の位置には影響しません。フローからの削除に関しては、それはposition：absoluteと同様に動作します。 – Terry
私はそれをハックと呼ぶ傾向があった理由は、ある場合には固定バーの高さが増し、重複が再び起こるということができるからです。私はこれらの細部を扱うことができるダイナミックなソリューションを探していました。 –
この場合、JSを使用して問題を回避する必要があります：（1）JSを使用して固定ナビゲーションバーの全高を計算し、それをトップパッディング（すなわち、 'padding-top'）または基本位置の「上」を文書のコンテンツラッパーに送る。代わりに、（2）は、固定ナビのコピーを実際に作成することです。固定ナビのコピーは静的/相対的に配置され、もう一方は固定され、隠されて固定されます。私はこの実装をもう少し複雑に思っていますが、利点は、高さを再計算する必要なしにナビゲーションバーのスペースを予約することです。 – Terry