Question

我想在图片的底部制作徽标，使其看起来像带有徽标的水印图片。

现在问题是绝对位置超出边界并进入页面底部。

我很确定一个小小的调整可以改变这里的图片（双重含义）。

jsFiddle：

这是我的代码：

Html：

<section>

<ul>
    <li>
        <a href="">
            <img src="http://www.reactive.com/Media/images/hero-ripcurl-01-2615749e-fba2-47da-abc7-d0ea3a9ecfbd-0-600x450.jpg" width=600 height=450>
            <img src="https://puaction.com/img/logo.png" width=300 height=65>
        </a>
        <a href="">
            <img src="http://img2.wikia.nocookie.net/__cb20120217141950/lego/images/6/67/Lego_lotr_2012_gollum-600x450.jpg" width=600 height=450>
                <img src="https://puaction.com/img/logo.png" width=300 height=65>
        </a>
    </li>
</ul>
            </section>

css：

section ul:first-child li {
    height: 450px;
    overflow: hidden;
    width: 600px;
}

section ul:first-child li a img:nth-child(2) {
    bottom: 0;
    height: 65px;
    position: absolute;
    left: 0;
    width: 300px;
    z-index: 9999;
}

任何想法？

Answer 1

section ul:first-child li {
    height: 450px;
    overflow: hidden;
    position: relative;
    width: 600px;
}

李

缺少

位置相对

希望这可以解决您的问题 - Demo

Answer 2

制作li项position:relative。如果您在元素上使用绝对位置，请使用其父元素的相对位置。否则，top，left，right和bottom等绝对位置值将根据body进行计算。

section ul:first-child li {
    position: relative;
}

相对位置内的绝对位置超出边界

2 个答案: