CSS：圖像定位問題

我有一個drupal 7網站，我在其中添加橫幅圖像作爲內容類型字段。但後來我使用CSS將其定位到絕對路徑，使用以下CSS規則。CSS：圖像定位問題

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

它工作正常的普通用戶，但是當我登錄作爲管理員的位置被弄亂，因爲工具欄覆蓋在上面的了。我該怎麼做才能讓它適用於管理員。這裏的頁面http://azkaar.com/_mysites/muusa/

來源

2012-02-24 NKA

這是Drupal如何根據登錄狀態處理某些元素的問題。我的建議是，你完全可以找到替代方案，而不是試圖在不同情況下使其工作。 – Purag 2012-02-24 03:52:23

你可以在drupal.stackexchange.com詢問 – Raptor 2012-02-24 03:53:17

嗯..當我看着這個CSS您的製作領域名字場旗幟圖像中心。

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

儘量把佈局的具體寬度，這意味着，如果你有

margin-left:-490px;

它應該是這樣的

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

我addded的z-index，如果你有問題在重疊。

但是在drupal中，我認爲它是管理端的一個問題。嘗試聯繫Drupal支持。

來源

2012-02-24 03:58:43 Bert

您遇到的最大問題是您指定了position: absolute。絕對位置是參考不是static（默認值）的第一個父代。因此，如果您將position: relative添加到父級，則該圖像將參考該圖像。

因爲沒有父母有相對屬性，所以圖片被放置在引用頁頂的位置。當您以管理員身份登錄時，會添加一個覆蓋圖，該覆蓋圖必須將所有內容向下推送，從而調高top: 123px的值。嘗試添加

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

您需要調整絕對定位的div的top之後的值。很難給出一個確切的答案，因爲我無法在管理員模式下登錄並查看它的CSS和html使用了什麼。

來源

2012-02-24 04:10:23 mrtsherman

總的來說，這聽起來很合理，謝謝。如果我將#wrapper定位爲相對，橫幅的直接父節點將繼承它。但是，這一切都取決於它們之間的任何其他元素是否沒有以某種方式定位。如果我將直接父母親的位置定位爲親戚，該怎麼辦？我會根據你的建議嘗試不同的事情，並在這裏更新。很可能我會保持這個網站的管理員，但我不想做一些在網站上工作的其他人很容易搞砸的事情。這個定位在CSS中一直很棘手。 – NKA 2012-02-24 13:56:52

所以它不會繼承，但橫幅是根據設置爲相對的最近父母進行定位的。由於工具欄覆蓋保持在上面，因此它最適合#wrapper。謝謝 – NKA 2012-02-25 02:05:32

CSS：圖像定位問題

回答

相關問題