2

だから私はこれを持っています：

<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>

画像をクリックすると、画面の中央にポップアップするようにします。画像は現在「#」を開いているため、ページの先頭に移動するだけです。

私の問題は、addedcartbg を position:fixed に設定すると、ページから完全に消えてしまうことです。また、画面の垂直方向の中央に配置する方法を知る必要があります。左右の余白を自動に設定して水平方向に中央に配置できることはわかっていますが、上下では機能しません。

これは、div の現在の CSS コードです。

.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;

}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}
4

3 に答える 3

0

z-indexも追加する必要があります

.addedcartbg {
  z-index:9999; // include this to avoid overlay of other divs.
}
于 2012-11-14T07:20:02.347 に答える
0

これは、このように変更するよりも、あなたのlighboxクラスだと思います。これで、作業が完了します。

デモ

.addedcartbg {
   background-color: rgba(153,153,153,0.3);
   height: 80px;
   width: 320px;
   padding-top: 40px;
   padding-right: 30px;
   padding-left: 30px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -50px; /*half of total height + half of top padding*/
   margin-left: -175px; /*half of total width + half of left padding*/
}
于 2012-11-14T06:36:05.737 に答える
0

位置に合わせて上下があります。ボディのスタイルを追加することもできます。

body {
    text-align:center;
/*the rest of your style*/
}

.addedcartbg {
    position: relative;
    top:200;
    margin-right: auto;
    margin-left: auto;
/*the rest of your style*/
}
于 2012-11-14T06:47:21.000 に答える