CSS：スパンは部分的にそれに適用されたCSSに従っています

私は自分のウェブサイトの中央に表示される成功メッセージを取得しようとしています。私が試したことは、「おすすめ商品」と呼ばれるセクター以外のすべてのウェブサイトに適用されます。CSS：スパンは部分的にそれに適用されたCSSに従っています

私のウィッシュリストに何かを追加すると、メッセージは画面の真ん中になく固定されているのではなく、製品の「フォロー」のように見えます。

詳細については、スクリーンショットを添付します。

CSSコード

.flag-message { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    position: fixed; 
    line-height: normal; 
    text-align: center; 
    font-size: 17px; 
    width: 400px; 
    vertical-align: middle; 
    /* height: 170px; */ 
    background-color: rgba(68, 68, 68, 0.72); 
    color: #ffffff; 
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.38); 
    padding: 25px; 
    border-radius: 5px; 
    border-style: solid; 
    border-color: rgba(255, 255, 255, 0.13); 
    font-family: 'Calibri', sans-serif; 
    /* font-weight: 700; */ 
    z-index: 9999949; 
}

出典

2016-11-30 Konstantinos A. Koletsas

コードを入力してください。 –

あなたが提供するCSSは良い（https://jsfiddle.net/mtvs05q9/）ので、前後に問題があります。あなたは完全なコードを提供できますか？ – Mat

@MatこれはDrupalビューです。私のテーマはブートストラップです。私はこれが間違っていると確信することなく何かに気付きます。私は明確な擬似要素を3つ持っています。これはブートストラップの通常の動作のように思えますが。 –

あなたの "製品" の位置がありと考えた：50％、左：50％、あなたに比較的従っているあなたの一番上になるように相対して、ラッパー/サイトではなく製品ですか？

出典

2016-11-30 10:36:51 Dutton

CSS：スパンは部分的にそれに適用されたCSSに従っています

答えて

関連する問題