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：图像定位问题

回答

相关问题