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

回答編集履歴

3

修正

2018/04/18 10:49

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

answer CHANGED
@@ -32,6 +32,7 @@
32
32
  codepenで確認する↓
33
33
  [https://codepen.io/RaRukAnA/pen/VxwPMe](https://codepen.io/RaRukAnA/pen/VxwPMe)
34
34
 
35
+ 質問者様のコードで試しました。
35
36
  fixedに変更すると表示される(topの数値は適当です。)
36
37
  ```CSS
37
38
  .p-feature:before {

2

fixedに変更

2018/04/18 10:48

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

answer CHANGED
@@ -30,4 +30,13 @@
30
30
  }
31
31
  ```
32
32
  codepenで確認する↓
33
- [https://codepen.io/RaRukAnA/pen/VxwPMe](https://codepen.io/RaRukAnA/pen/VxwPMe)
33
+ [https://codepen.io/RaRukAnA/pen/VxwPMe](https://codepen.io/RaRukAnA/pen/VxwPMe)
34
+
35
+ fixedに変更すると表示される(topの数値は適当です。)
36
+ ```CSS
37
+ .p-feature:before {
38
+ position: fixed;
39
+ top: 160px;
40
+ ```
41
+ codepenで確認する↓
42
+ [https://codepen.io/RaRukAnA/pen/aGbWvV](https://codepen.io/RaRukAnA/pen/aGbWvV)

1

コードを追加

2018/04/18 10:47

投稿

Atsushi_Okumura
Atsushi_Okumura

スコア355

answer CHANGED
@@ -1,3 +1,33 @@
1
1
  z-indexとoverflowには何の因果関係もないと思われます。
2
+ ```HTML
3
+ <div class="foo">
4
+ <p class="bar">bar</p>
5
+ </div>
6
+ <div class="baz"></div>
7
+ ```
8
+ ```CSS
9
+ .foo {
10
+ width: 100px;
11
+ height: 100px;
12
+ background-color: #fff;
13
+ border: 1px solid #ccc;
14
+ position: relative;
15
+ overflow: hidden;
16
+ z-index: 10;
17
+ }
18
+ .bar {
19
+ padding: 70px 0;
20
+ background-color: #55ffff;
21
+ }
22
+ .baz {
23
+ width: 100px;
24
+ height: 100px;
25
+ background-color: #f5f5f5;
26
+ position:absolute;
27
+ top: 0;
28
+ left: 50px;
29
+ z-index: 5;
30
+ }
31
+ ```
2
32
  codepenで確認する↓
3
33
  [https://codepen.io/RaRukAnA/pen/VxwPMe](https://codepen.io/RaRukAnA/pen/VxwPMe)