teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

補足

2021/07/05 07:13

投稿

shigeimon
shigeimon

スコア2

title CHANGED
File without changes
body CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  position:stickyを使ってグローバルメニューをページの左側にフロート状態で固定したいと思っています。
4
4
  ただし、フッター部分にはメニューを重ねたくないため、ページトップからフッターの手前までをsticky containerとして設定すれば実現できるかと考えています。
5
+ また、position:stickyを指定したメニューは常に画面の手前に表示された状態にしたいと思っています。
5
6
 
6
7
  ### 発生している問題・エラーメッセージ
7
8
 

4

内容の補足

2021/07/05 07:13

投稿

shigeimon
shigeimon

スコア2

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,13 @@
8
8
  position:stickyを指定しているheader部分を常に手前にフロートするためにz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
9
9
  headerをコンテンツの手前に重ねるにはどうしたら良いでしょうか。
10
10
 
11
+ 【実現したいデザイン】(position:fixedで再現しています)
12
+ ![イメージ説明](8b93b65f002c26e48f786d844d0f886d.gif)
13
+
14
+ 【現在のデザイン】
15
+ ![イメージ説明](350b31b7ccad22c145c6b0583a462abc.gif)
16
+
17
+
11
18
  ### 該当のソースコード
12
19
 
13
20
  ```html

3

2021/07/02 06:18

投稿

shigeimon
shigeimon

スコア2

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  ### 発生している問題・エラーメッセージ
7
7
 
8
- position:stickyを指定しているheader部分を常に左端にフロートするためにz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
8
+ position:stickyを指定しているheader部分を常に手前にフロートするためにz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
9
9
  headerをコンテンツの手前に重ねるにはどうしたら良いでしょうか。
10
10
 
11
11
  ### 該当のソースコード

2

説明の補足

2021/07/01 08:47

投稿

shigeimon
shigeimon

スコア2

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,11 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- position:stickyを使ってグローバルメニューをページの左側に固定したいと思っています。
3
+ position:stickyを使ってグローバルメニューをページの左側にフロート状態で固定したいと思っています。
4
+ ただし、フッター部分にはメニューを重ねたくないため、ページトップからフッターの手前までをsticky containerとして設定すれば実現できるかと考えています。
4
5
 
5
6
  ### 発生している問題・エラーメッセージ
6
7
 
7
- position:stickyを指定しているheader部分常に左端にフロートいたz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
8
+ position:stickyを指定しているheader部分常に左端にフロートするためz-indexを指定しているのですが、要素の重なりが反映されずにheaderとそれ以降のコンテンツが上下に並んで表示されてしまいます。
8
9
  headerをコンテンツの手前に重ねるにはどうしたら良いでしょうか。
9
10
 
10
11
  ### 該当のソースコード

1

文法の修正

2021/07/01 08:27

投稿

shigeimon
shigeimon

スコア2

title CHANGED
File without changes
body CHANGED
@@ -12,8 +12,6 @@
12
12
  ```html
13
13
  <!DOCTYPE html>
14
14
  <html lang="ja">
15
-
16
-
17
15
  <body>
18
16
  <header>
19
17
  <nav>