CSS：Image Positioning Issue

Question

私は、コンテンツタイプのフィールドとしてバナー画像を追加しているdrupal 7サイトを持っています。しかし、私はそれを次のCSS規則で絶対パスに位置付けるためにCSSを使用しています。

.field-name-field-banner-image { 
     position:absolute; 
     top:123px; 
     left:50%; 
     margin-left:-490px; 
    } 

普通のユーザーにはうまくいきますが、管理者としてログインすると、ツールバーのオーバーレイが原因で位置が乱れてしまいます。それを管理者にも有効にするにはどうしたらいいですか？ ここにページがありますhttp://azkaar.com/_mysites/muusa/

Answer 1

Hmm ..私はあなたの作るフィールド名フィールドバナー画像センターを見ています。それはあなたが

margin-left:-490px; 

を持っている場合、それはあなたが問題を持っている場合、私はZインデックスをadddedこの

.field-name-field-banner-image { 
    width:980px; 
    position:absolute; 
    z-index:200; 
    top:123px; 
    left:50%; 
    margin-left:-490px; 
} 

ようにする必要がありますを意味して

.field-name-field-banner-image { 
    position:absolute; 
    top:123px; 
    left:50%; 
    margin-left:-490px; 
} 

は、レイアウトの特定の幅を配置しようオーバーラップしている。

しかし、drupalで私はadmin側の問題だと思う。 drupalのサポートに連絡してください。

Answer 2

最大の問題は、position: absoluteを指定したことです。絶対位置は、static（デフォルト）ではない最初の親を参照しています。したがって、親にposition: relativeを追加すると、イメージはそれを参照します。

親が相対的なプロパティを持たないため、イメージはページのトップを参照して配置されます。管理者としてログインすると、オーバーレイが追加され、すべてのコンテンツがプッシュダウンされ、top: 123pxの値が不正になる可能性があります。あなたはその後、絶対位置のdivのtop値を調整する必要があります

div#wrapper { position: relative; } 
.field-name-field-banner-image { top: 113px; } 

を追加してみてください。私は管理者モードでログインすることができず、そのバーがcssとhtmlのために何を使用しているかを見ることができないので、正確な答えを出すのは難しいです。