Question

我很擅长编码，我很乐意花很多时间，但现在我真的没有时间。我花了两周时间试图找出这件事。

我在tumblr上制作了我的portoflio。我使用了一个主题，图片正在填满整个屏幕，所以你基本上什么都不能，但是图片。哪个好，我想要这样。但。我想留一点小贴纸，实际上是pointing arrow picture，上面写着：“继续滚动更多”。所以这个音符总是被全尺寸图像隐藏。

如何在最顶部移动音符图像？图片上方的帖子？哪种方法最简单？

我尝试了一些解决方案，我在这里找到了，但它们都没有奏效...... 我认为这不会是一个问题，但这是我的投资组合，由于这个问题，我仍然无法发送它。非常感谢你的帮助。抱歉这么傻。这是我的portfolio。

Answer 1

你可以这样做，只需将属性z-index：xx添加到你想要高于其他任何东西的图像（或实际上是什么）。此外，您可以将其与绝对位置或固定位置组合使用。

div { width: 100px; height: 100px; } .container { position: absolute; top: 0px; left: 0px; } .green { position: relative; left: 20px; top: 20px; background-color: green; z-index: 1; } .pink { position: relative; left: 80px; top: 0px; background-color: pink; z-index: 3; } http://codepen.io/paulirish/pen/CgAo

在这里你可以看到各种例子，Tom Wiltzius的信用

Answer 2

我没有使用tumblr的经验，但根据您的标记，它看起来像是使用HTML和CSS。当您的图像填满整个屏幕并想要在该图像的顶部添加图像时，您需要在div container中包含两个图像，以便为其提供参考。此container需要position: relative，图片的样式将与之相关。所以，你的HTML和CSS应该是这样的：

HTML

<div class="container">
    <img class="imageOne" src="path/url goes here" alt="" />
    <img class="imageTwo" src="path/url goes here" alt="" />
</div>

CSS

.container {
    position: relative;
    top: 0px;
    left: 0px;
}
.imageOne {
    position: relative;
    top: 0px;
    left: 0px;
}    
.imageTwo {
    position: absolute;
    top: 30px;
    left: 30px;
}

因此，您的第一张图片从顶部设为0 pixels，从左侧设为0 pixels。这会将其与您创建的container div匹配，以保存图像并将其设置为相同的位置。你的第二张图片是position: absolute到container div，所以它是30 pixels从顶部开始，30 pixels从左边开始，在第一张图片后加载，然后放在顶部！

干杯！

一张简单的图片（包括帖子）

2 个答案: