回答編集履歴
2
誤植の修正
test
CHANGED
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
|
|
53
53
|
`.digicatalog`がheaderを突き抜けて端に行ってしまうのは、.digicatalogの親要素にposition:relativeの指定がどこにも入っていないからです。.topにrelative指定を入れていますが、これは.digicatalogとは兄弟関係にある要素であり、絶対配置の基準領域として機能していません。
|
|
54
54
|
|
|
55
|
-
.digicatalog
|
|
55
|
+
.digicatalogをどこの領域内で絶対配置したいのかによって対応は変わります。
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
１．.topの領域の中で配置したい場合
|
|
59
|
+
１．.topの領域の中で絶対配置したい場合
|
|
60
60
|
|
|
61
61
|
```HTML
|
|
62
62
|
|
1
追記
test
CHANGED
|
@@ -39,3 +39,75 @@
|
|
|
39
39
|
で出来ます。思うような位置に配置されない場合、多くは１の基準領域の指定がおかしいことが多いので、
|
|
40
40
|
|
|
41
41
|
どの要素を配置の基準領域としているのか再度確認することをお勧めします。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
----
|
|
46
|
+
|
|
47
|
+
追記に合わせて回答を補足します。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
###1.矢印つきバナー
|
|
52
|
+
|
|
53
|
+
`.digicatalog`がheaderを突き抜けて端に行ってしまうのは、.digicatalogの親要素にposition:relativeの指定がどこにも入っていないからです。.topにrelative指定を入れていますが、これは.digicatalogとは兄弟関係にある要素であり、絶対配置の基準領域として機能していません。
|
|
54
|
+
|
|
55
|
+
.digicatalog`をどこの領域以内で絶対配置したいのかによって対応は変わります。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
１．.topの領域の中で配置したい場合
|
|
60
|
+
|
|
61
|
+
```HTML
|
|
62
|
+
|
|
63
|
+
<header class="header">
|
|
64
|
+
|
|
65
|
+
<div class="top">
|
|
66
|
+
|
|
67
|
+
<img src="/img/imagebanner.png" width="1178" height="390" alt=""/>
|
|
68
|
+
|
|
69
|
+
<div class="digicatalog">/*.topの子要素にする*/
|
|
70
|
+
|
|
71
|
+
<img src="yukata16/img/dicatalogbtn.png" width="334" height="70" alt=""/>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
２．.headerの領域内で絶対配置したい場合
|
|
84
|
+
|
|
85
|
+
```CSS
|
|
86
|
+
|
|
87
|
+
.header {
|
|
88
|
+
|
|
89
|
+
position: relative; /*.headerを基準領域とする*/
|
|
90
|
+
|
|
91
|
+
width: 80%;
|
|
92
|
+
|
|
93
|
+
margin: 0 auto;
|
|
94
|
+
|
|
95
|
+
width: 1181px;
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
###2.カルーセルの左右矢印
|
|
104
|
+
|
|
105
|
+
カルーセルの矢印ボタンの位置がズレてしまうのは、おそらく左右の矢印ボタンが`#button`という要素を基準として配置されているからであると思われます。１．のバナーと同様、.caroufredsel_wrapperと#buttonは兄弟関係であり、それぞれ独立して配置されていますので、現状では.caroufredsel_wrapperの領域サイズに自動的に連動させて矢印の位置を決めることは出来ない状態です。
|
|
106
|
+
|
|
107
|
+
現在#buttonにどのようなスタイルが適用されているのか分からないので正確なことは言えませんが、次のようにすることで矢印を常にカルーセル領域の外側に配置できるようになると思います。
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
１．`.caroufredsel_wrapper`と`#button`が同じサイズで表示されるように調整
|
|
112
|
+
|
|
113
|
+
2.`#button`領域の外側に`.left`と`.right`を絶対配置（left:とright:にマイナス値を入れれば要素の外側に配置できます）
|