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

回答編集履歴

3

補足への追記

2016/09/12 09:03

投稿

flat
flat

スコア617

answer CHANGED
@@ -1,12 +1,12 @@
1
1
  `z-index`プロパティは`position`プロパティの値が`static`(初期値)以外に指定されていないと有効になりません。
2
2
  `.table-sec`に`position: relative;`を追加して下さい。
3
3
 
4
- 追記
4
+ **追記**
5
5
  私の勘違いでした。
6
6
  重なり順ではなくそもそも重ねたくないのですね。
7
7
  `position`プロパティの値を上書きしてあげると良いと思います。
8
8
 
9
- ```
9
+ ```CSS
10
10
  @media (min-width: 600px) {
11
11
  /* 省略 */
12
12
  .absolute-container {
@@ -14,4 +14,126 @@
14
14
  overflow: hidden; /* floatの解除 */
15
15
  }
16
16
  }
17
+ ```
18
+
19
+ **補足への追記**
20
+ 省略無しで全てのCSSを一部修正して記載しています。
21
+ なお、`@media (min-width: 300)`内のルールセットはメディアクエリを使う必要性を感じなかったのでメディアクエリを削除して全てまとめました。
22
+ 他にも多少気になる点はありますが、この質問の本題ではないのでここでは触れません。
23
+ ```CSS
24
+ /* Menu */
25
+ .absolute-container {
26
+ position: relative;
27
+ width: 100%;
28
+ background-color: #2797CD;
29
+ }
30
+ #menu {
31
+ /* display: none; 確認のためにコメントアウトしています */
32
+ opacity: .6; /* 不透明度を60%にする */
33
+ /*
34
+ * opacity プロパティは重なりを分かりやすくするために指定しています
35
+ * 確認後は消して下さい
36
+ */
37
+ position: absolute; /* #menu だけ文書の流れから外す */
38
+ width: 100%;
39
+ max-width: 1480px;
40
+ margin: 0 auto;
41
+ padding: 0;
42
+ }
43
+ #menu li {
44
+ display: inline-block;
45
+ width: 100%;
46
+ margin: 0px 0px;
47
+ padding: 0;
48
+ background-color: #00A9E8;
49
+ }
50
+ #menu li a {
51
+ display: block;
52
+ padding: 15px 0 15px;
53
+ color: #FFF;
54
+ text-align: center;
55
+ text-decoration: none;
56
+ transition: all .3s;
57
+ }
58
+ #menu li a:hover {
59
+ color: #2D92F3;
60
+ }
61
+ #toggle {
62
+ display: block;
63
+ position: relative;
64
+ width: 100%;
65
+ background: #2797CD;
66
+ }
67
+ #toggle a {
68
+ display: block;
69
+ position: relative;
70
+ padding: 20px 0 20px;
71
+ border-bottom: 2px solid #4baacb;
72
+ color: #FFF;
73
+ text-align: center;
74
+ text-decoration: none;
75
+ }
76
+ /* アイコンをCSSで表現 */
77
+ #toggle:before {
78
+ display: block;
79
+ content: "";
80
+ position: absolute;
81
+ top: 50%;
82
+ left: 10px;
83
+ width: 30px;
84
+ height: 30px;
85
+ margin-top: -15px;
86
+ background: #FFF;
87
+ }
88
+ #toggle a:before,
89
+ #toggle a:after {
90
+ display: block;
91
+ content: "";
92
+ position: absolute;
93
+ top: 50%;
94
+ left: 10px;
95
+ width: 30px;
96
+ height: 6px;
97
+ background: #2a83a2;
98
+ }
99
+ #toggle a:before {
100
+ margin-top: -9px;
101
+ }
102
+ #toggle a:after {
103
+ margin-top: 3px;
104
+ }
105
+
106
+ @media (min-width: 600px) {
107
+ #toggle {
108
+ display: none;
109
+ }
110
+ #menu {
111
+ position: static; /* absolute を上書き */
112
+ opacity: 1; /* opacity を上書きして不透明度を100%にする */
113
+ /*
114
+ * opacity プロパティは重なりを分かりやすくするために指定しています
115
+ * 確認後は消して下さい
116
+ */
117
+ }
118
+ .lfloat {
119
+ float: left;
120
+ }
121
+ .rfloat {
122
+ float: right;
123
+ }
124
+ #menu li a {
125
+ font-size: 16px;
126
+ }
127
+ #menu li {
128
+ width: 14%;
129
+ margin: 40px 5px 0px;
130
+ background-color: transparent;
131
+ }
132
+ /* clearfix で float プロパティによる回り込みを解除する */
133
+ #menu:after {
134
+ display: block;
135
+ clear: both;
136
+ content: "";
137
+ }
138
+ }
17
139
  ```

2

コードの修正

2016/09/12 09:03

投稿

flat
flat

スコア617

answer CHANGED
@@ -7,9 +7,11 @@
7
7
  `position`プロパティの値を上書きしてあげると良いと思います。
8
8
 
9
9
  ```
10
- @media (min-width: 600px)
10
+ @media (min-width: 600px) {
11
+ /* 省略 */
11
- .absolute-container {
12
+ .absolute-container {
12
- position: relative;
13
+ position: relative;
13
- overflow: hidden; /* floatの解除 */
14
+ overflow: hidden; /* floatの解除 */
15
+ }
14
16
  }
15
17
  ```

1

追記

2016/09/10 08:18

投稿

flat
flat

スコア617

answer CHANGED
@@ -1,2 +1,15 @@
1
1
  `z-index`プロパティは`position`プロパティの値が`static`(初期値)以外に指定されていないと有効になりません。
2
- `.table-sec`に`position: relative;`を追加して下さい。
2
+ `.table-sec`に`position: relative;`を追加して下さい。
3
+
4
+ 追記
5
+ 私の勘違いでした。
6
+ 重なり順ではなくそもそも重ねたくないのですね。
7
+ `position`プロパティの値を上書きしてあげると良いと思います。
8
+
9
+ ```
10
+ @media (min-width: 600px)
11
+ .absolute-container {
12
+ position: relative;
13
+ overflow: hidden; /* floatの解除 */
14
+ }
15
+ ```