css - 子图像绝对定位时DIV背景消失

Question

我正在尝试制作 Joomla 模板，但我的 HTML 和 CSS 代码有一个奇怪的问题。我有一个带有一些文本的页脚，一个 Joomla 模块和一个 img。当我尝试通过将位置设置为绝对位置并将右侧设置为 0 来将图像带到页脚的右侧时，页脚的背景消失了。

我的 HTML 代码：

<footer>
    <p>some text</p>
    <p><jdoc:include type="modules" name="footer" /></p>
    <img src="<?php echo $templateDir;?>/images/footerBgR.png"/>
</footer>

我的 CSS 代码：

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
}

footer p {
    float: left;
    color: #fff;
    margin: 3px 0px 0px 10px;
}

footer img {
    position: absolute;
    right: 0px;
}

当我删除“位置：绝对；” 显示了背景，但图像不在我想要的位置。

Answer 1

你需要给页脚一个高度

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
    height:100px;
}

根据您的图像高度更改页脚高度。

jsFiddle 文件

你也可以这样做

给height: 100% and overflow: hidden页脚并从图像中删除绝对位置并给float: right

footer {
    width: 75%;
    position: relative;
    margin: 0px 10% 0px 10%;
    background: #292929;
    border-radius: 25px;
    height:100%;
    overflow:hidden;
}

footer img {
    float:right;
}

jsFiddle 文件

Answer 2

尝试将display: inline-block;或添加display: block;到您的图像。

footer img {
    position: absolute;
    right: 0px;
    display: inline-block;
}