/
position.html
56 lines (49 loc) · 2.18 KB
/
position.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>position</title>
<link rel="stylesheet" type="text/css" href="position.css">
<body>
yousoはabosokute top,leftは何も設定してないのでディフォルトで左上に張り付く
<br>oyayousoはrelative
<div class="rel1">
<div class="abs">youso</div>
oyayouso
</div>
<div style="width:100px;height:20px;"></div>
<p>インラインに対してpositionを使い、left要素がない場合、text-alignなどの影響を受ける可能性ある(ブラウザによって違う!)ので基本blockにすべし</p>
<p>oyayousoがtext-align:centerになっている以外は一段上と一緒
<div class="rel1">
<span class="abs">youso</span>
oyayouso
</div>
<div style="width:100px;height:20px;"></div>
<p>上要素(line_img)がposition:absoluteだと直下要素(block)がpositionなしでoverflow:hiddenだと効かない(はみ出てしまう)</p>
<p>この場合、line_imgの親は直親(class=block)ではなく、class="rel1"になる</p>
<div class="rel1" style="padding:1px">
<div class="block">
<div class="line_img"></div>
</div>
</div>
<div style="width:100px;height:20px;"></div>
<p>上要素(line_img)がposition:absoluteで直下要素(block)がpositionあればoverflow:hiddenがきく</p>
<p>ちなみに大親がrelativeで直親がabsoluteであっても直親が基準になる。positionがあれば基準が変わる(一段上の親にはならない)</p>
<div class="rel1" style="padding:1px">
<div class="block" style="position:absolute;top:30px;left:50%;margin-left:-50px;">
<div class="line_img" style="top:50px;"></div>
</div>
</div>
<div style="width:100px;height:20px;"></div>
<p>通常のoverflow:hidden(両方positionなしであれば正常に機能する)</p>
<div class="block" style="margin:0;background:#eee;">
<div class="line_img2"></div>
</div>
<div style="width:100px;height:20px;"></div>
<p>animation機能</p>
<div class="rel1" style="padding:1px">
<div class="block" style="position:absolute;top:30px;left:50%;margin-left:-50px;">
<div class="line_img scroll_effect" ></div>
</div>
</div>
</body>
</html>