100％CSS要素が高いHTMLページにトップナビゲーションバーを追加する

HTMLテンプレートにナビゲーションバーを追加しようとしていますが、高さ= 100％のマップで覆われています。これは私のマップのスタイルである：私のナビゲーションバーがまだ存在するが、それはマップによってカバーされています100％CSS要素が高いHTMLページにトップナビゲーションバーを追加する

#windyty { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #e7e7e7; 
 
    background-color: #f3f3f3; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 

 
li a.active { 
 
    color: white; 
 
    background-color: #4CAF50; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> 
 
<link rel="stylesheet" href="resources/css/bootstrap-3.3.6.min.css"> 
 
<link rel="stylesheet" href="resources/css/font-awesome-4.7.0.min.css"> 
 
<link rel="stylesheet" href="resources/css/bootstrap-social-4.12.0.css"> 
 
<link rel="stylesheet" href="resources/css/ie10-viewport-bug-workaround.css"> 
 
<link rel="stylesheet" href="resources/css/bootstrap-datetimepicker-4.17.37.min.css"> 
 
<link rel="stylesheet" href="resources/css/jquery.dataTables-1.10.12.min.css"> 
 
<link rel="stylesheet" href="resources/css/buttons.dataTables-1.2.2.min.css"> 
 
<link rel="stylesheet" href="resources/css/buttons.bootstrap-1.2.2.min.css"> 
 
<link rel="stylesheet" href="resources/css/leaflet-0.7.7.css"> 
 
<link rel="stylesheet" href="resources/css/leaflet.extra-markers.min.css"> 
 
<link rel="stylesheet" href="resources/css/easy-button.css"> 
 
<link rel="stylesheet" href="resources/css/leaflet-sidebar.min.css"> 
 
<link rel="stylesheet" href="resources/css/styles-min-20170519174922.css"> 
 

 
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
 
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" /> 
 
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" /> 
 

 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 
 
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script> 
 
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script> 
 

 

 
<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
<div id="windyty"></div>

CE。常に表示されるナビゲーションバーを追加するにはどうすればよいですか？私はこのことが些細なものであればごめんなさい。おかげ

出典

2017-05-30 Lorenzo Liguori

StackOverflowへようこそ！私たちがあなたのお手伝いをするために、あなたの質問を更新して**関連するすべてのコードを[**最小限で完全で検証可能な例**]で表示するようにしてください（http://stackoverflow.com/help/ mcve）。あなたの問題を解決するためにこれまでに試したことをお聞かせください。詳細については、[**よくある質問をどうやるか**]（http://stackoverflow.com/help/how-to-ask）に関するヘルプ記事を参照して、サイトの[**ツアー**]（http://stackoverflow.com/tour）:) –

完了、ありがとう！：D –

windytyは画像がある場所です。この場合、常にウィンドウの上/左に配置されることを意味する絶対的に配置されています。それはwindytyの背景イメージにして、あなたは大丈夫になるはずです。 – Gerard

固定ナビゲーションバーのコードです。変更点は次のとおりです：1）絶対2としてwindytyを削除）このリンクを使用すると、一定のナビゲーションバーを作るのに役立ちます固定

#windyty { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    position: fixed; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #e7e7e7; 
 
    background-color: #f3f3f3; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 

 
li a.active { 
 
    color: white; 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
<div id="windyty"> 
 
    <h1>abcdef</h1> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
    <p>Some text some text some text some text..</p> 
 
</div> 
 

 
</body>

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

希望として、ULタグを作ります。

出典

2017-05-30 05:28:08

ありがとうございますが、私はwindytyオブジェクトをナビゲーションバーの直後（オーバーラップなし）に**開始**したいと思います。 Windytyはマップなので、Nav Barがそれをカバーするのを許可したくありません。出来ますか？ –

ナビゲーションバーと重ならないようにwindytyにmargin-topプロパティを使用します。 –

body { 
    background:url("UR URL") no-repeat center center; 
    background-size:cover; 
}

これはナビゲーションの背景を持っています。ここ

#windyty { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
ul { 
 
    position: fixed; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border: 1px solid #e7e7e7; 
 
    background-color: #f3f3f3; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
body { 
 
    background: url("https://image.freepik.com/free-vector/polygonal-blue-background-with-lights_1035-6712.jpg") no-repeat center center; 
 
    background-size: cover; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #666; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #ddd; 
 
} 
 

 
li a.active { 
 
    color: white; 
 
    background-color: #4CAF50; 
 
}

<body> 
 

 
    <ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    </ul> 
 

 
    <div id="windyty"> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    <p>MY PAGE</p> 
 
    </div> 
 

 
</body>

出典

2017-05-30 05:16:30 Hash

100％CSS要素が高いHTMLページにトップナビゲーションバーを追加する

答えて

関連する問題