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

回答編集履歴

4

誤解

2019/02/25 10:02

投稿

yu-smc
yu-smc

スコア610

answer CHANGED
@@ -1,31 +1,1 @@
1
- 取れません。
2
-
3
- その場合、さらに親でposition: relativeな要素があればその要素に、なければhtml要素基準になります。
4
-
5
- 同じ効果を実現するなら、
6
- ```html
7
- <div class="parent"></div>
8
- <div class="dummy"></div>
9
- <div class="child"></div>
10
- ```
11
-
12
- ```css
13
- .parent {
14
- position: absolute;
15
- /* その他略 */
16
- }
17
-
18
- .dummy {
19
- position: relative;
20
- width: 100%;
21
- height: 100%;
22
- }
23
-
24
- .child {
25
- position: absolute;
26
- /* その他略 */
27
- }
28
- ```
29
-
30
- でできます。
31
- この場合親要素のheightが明記されている必要があります。
1
+ すみません誤解した回答を載せていましたので一旦文章を削除します。

3

コードの追加

2019/02/25 10:02

投稿

yu-smc
yu-smc

スコア610

answer CHANGED
@@ -3,8 +3,29 @@
3
3
  その場合、さらに親でposition: relativeな要素があればその要素に、なければhtml要素基準になります。
4
4
 
5
5
  同じ効果を実現するなら、
6
- 親要素・・・position: absolute
6
+ ```html
7
- ダミー要素(親要素と同じサイズ)・・・position: relative
7
+ <div class="parent"></div>
8
+ <div class="dummy"></div>
8
- 子要素・・・position:absolute
9
+ <div class="child"></div>
10
+ ```
9
11
 
12
+ ```css
13
+ .parent {
14
+ position: absolute;
15
+ /* その他略 */
16
+ }
17
+
18
+ .dummy {
19
+ position: relative;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
23
+
24
+ .child {
25
+ position: absolute;
26
+ /* その他略 */
27
+ }
28
+ ```
29
+
10
- でできます。
30
+ でできます。
31
+ この場合、親要素のheightが明記されている必要があります。

2

補足

2019/02/25 09:13

投稿

yu-smc
yu-smc

スコア610

answer CHANGED
@@ -3,8 +3,8 @@
3
3
  その場合、さらに親でposition: relativeな要素があればその要素に、なければhtml要素基準になります。
4
4
 
5
5
  同じ効果を実現するなら、
6
- 親要素・・・position: absolute
6
+ 親要素・・・position: absolute
7
- ダミー要素・・・position: relative
7
+ ダミー要素(親要素と同じサイズ)・・・position: relative
8
- 子要素・・・position:absolute
8
+ 子要素・・・position:absolute
9
9
 
10
10
  でできます。

1

gozi

2019/02/25 09:09

投稿

yu-smc
yu-smc

スコア610

answer CHANGED
File without changes