html - 如何使元素出现在html之上，而不影响布局

下面是我从搜索引擎优化专家那里学到的一句话：
在网页的子页面中，可能有多个指向主页的链接。但是首页的第一个链接应该在标签中包含有用的文本词，因为这个链接是爬虫唯一会注意的。
假设以上是正确的，并具有以下代码：

<div class="topImage">
  <a href="/" title="topImage"><img src="url"></a>
</div>

<div class="imageBelow">
  <a href="/" title="imageBelow">Useful SEO Text</a>
</div>

…如何使源代码中的第二个链接（文本）显示在第一个链接（这是图像）的上方，而不影响网页的布局？这可能吗？

最佳答案

我知道你说的搜索引擎优化是什么意思。
你可以用一点css
选项1：

.imageBelow {
     position:absolute;
     top:0;
     left:0;
     z-index:10;
 }
.topImage {
     z-index:0;
 }

但在我看来，更好的方法是给div中的<a>标记一个背景图像。然后，你可以像下面的例子一样把所有的seo文本放在那里，并给它一个‘文本缩进’和一个非常高的负值。以这种方式，爬虫程序可以看到文本并使用它进行优化，但是你得到的html更少，没有多个链接。
选项2

<!-- HTML PART //-->
<div class="topImage">
    <a href="/" title="top-image">IMPORTANT SEO TEXT</a>
</div>

/* CSS PART */
.topImage > a {
    background:url(*path to your image*) left top no-repeat;
    width:100px;
    height:100px;
    text-indent:-999em !important;
    display:block;
}