お世話になっております。
楽天のPCトップページについてです。
いつも左側に縦バナーを設置していますが、背景の指示を入れたらトップページに
表示されなくなりました。
(各商品ページには表示されています。)
背景の指示を入れた場所が悪いと思い、レフトバナーの指示の下に入力しましたが
レフトバナーも背景も表示されなくなってしまいました。
ネットで調べましたら、重ねて表示する際に、上に表示する順序の指示が出来るそうですが
よくわからず、こちらに質問させていただきました。
==ネットで調べた指示=====
img.content1{position:absolute; top:100px; left:100px; z-index: 2; }
img.content2{position:absolute; top:200px; left:200px; z-index: 1; }
==ここまで=====
上記の指示を入れる際、img.content1がどの画像を指すのか指示が必要と
思いましたが、どのように入力すればいいのでしょうか。
==現在の入力はこのようになっています。=======
<!--★縦バナー★ ここから-->
<style type="text/css">
body { background: url(
https://image.rakuten.co.jp/SHOP-URL/cabinet/03394596/imgrc0075761729.jpg); }
@media screen and (min-width:1300px) and (max-width:10000px){
.tban {
height:10400px;/*800の倍数で設定(縦バナーのサイズ)*/
_height:9000px; /*高さを設定*/
width: 100px; /*画像の横幅に合わせる*/
z-index: -1; /*ページの背面に廻る様に*/
list-style:none;
position: absolute;
display: block;
visibility:visible; /*消したい時はhiddenに変更*/
min-height:100%;
top:100px; /**/
}
/*画面端からの隙間を調整*/
/*左縦バナー画像*/
#t_left {
margin:10px;
left:0px;
background: url(
https://image.rakuten.co.jp/SHOP-URL/cabinet/03394596/imgrc0075761822.jpg) repeat-y scroll;
/*hoge.jpgを画像のパスに変更*/
z-index:0;
}
div#leftbunner a {
display: block;
width: 100%;
max-width: 110px;
height: 9000px;/*画像サイズ*/
z-index:0;
}
}
@media screen and (min-width:0px) and (max-width:1300px){
.tban {
list-style:none;
position: absolute;
visibility:hidden; /*消したい時はhiddenに変更*/
}
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.tab_ban {
width: 80px;/* 最初に表示されるバナーの幅 */
height: 200px;/* バナーの高さ */
position: fixed !important;/* バナーを固定します */
position: absolute;
right: 0;/* 右から0pxの位置に指定 */
}
.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}
.tab_ban:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */
/* 以下アニメーションの設定 */
-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}
.tab_ban a:hover {
width: 200px\9;
}
#tab01 {
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0068728349.jpg) 0 0 no-repeat;
bottom: 50px;
}
#tab02 {
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0073120065.jpg) 0 0 no-repeat;
bottom: 250px;
}
#tab03 {
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat;
bottom: 450px;
}
#tab04 {
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat;
bottom: 650px;
}
</style>
<style>
/* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
width: 306px !important;
}
body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
width: 306px !important;
height: 48px !important;
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0073710915.jpg) no-repeat 0 0 !
important;
}
body div.bookmarkArea div.bkm a.addBkm {
width: 306px !important;
height: 48px !important;
}
/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
width: 306px !important;
padding-left: 0px !important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
width: 306px !important;
height: 48px !important;
background: url(
http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0073710916.jpg) no-repeat 0 0 !
important;
}
body div.shopBookmarkArea div.shopBkm a.addShopBkm {
width: 306px !important;
height: 48px !important;
}
body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite { width: 460px !important; }
body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite > div { display: inline-block; }
<ul>
<!--左縦バナーURL-->
<li class="tban" id="t_left"><div id="leftbunner"><a href="
http://item.rakuten.co.jp/takasago-mejya/c/0000000365/"></a></div></li>
<div id="tab01" class="tab_ban"><a href="
http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a> <!-- /#tab1.tab_ban --></div>
<div id="tab02" class="tab_ban"><a href="
http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a> <!-- /#tab2.tab_ban --></div>
<div id="tab03" class="tab_ban"><a href="
http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a> <!-- /#tab3.tab_ban -->
==ここまで====