Html 堆栈'；a'；在'；p'；标签

我试图做的是使用

z-index

属性将“a”标记堆叠在“p”标记之上。所以我的html是这样的

<div id="personalText" >
    <a href="#" id="editButton"> edit </a>
    <p id="descText">{{profile.desc}}</p>
</div>

#editButton
{
    position:relative;
    z-index:2;
}
#descText
{
    position:relative;
    margin-top: 5px;
    margin-bottom:5px;
    z-index:1;
}

---

我认为这应该将

a

堆叠在

p

标记的顶部，但这并没有发生。有人能解释一下我做错了什么吗？

下面是如何填写

该示例显示了一个可能的用例：将链接放在描述的顶部，只有当用户将鼠标悬停在链接上方时，链接才会显示。
位置：relative
不会将元素从布局中分离，因此默认情况下，该元素仍然占据与其他情况相同的位置<代码>相对

有两个用途：相对于布局中的“真实”位置偏移元素（这需要设置

顶部

，

左侧

，等等），并用作非

静态

值，以便具有

位置：绝对

的子元素将自身相对于它定位

综上所述，您可能想要做的是在父级上设置

position:relative

，在编辑链接上设置

position:absolute

（至少）。但这可能会很难看，因为文本可能会重叠，无法阅读。

您还必须将

  #personalText 
  {
    position:relative; 
  } 

  #editButton
  {
      position:absolute;    /* change  */
      top:0;      /* new  */
      left:0;     /* new  */
      z-index:2;
  }

---

正如Mihalis Bagos所说，您需要向上推您的

#descText

元素

以下是生成的CSS：

#editButton
{
    position:relative;
    z-index:2;
}
#descText
{
    position:relative;
    margin-top: 5px;
    margin-bottom:5px;
    bottom:25px;
    z-index:1;
}

---

下面是它的结果。

这是JavaScript的完美用法：

CSS

jQuery

$('#descText').hover(function() {
    $(this).find('a').removeClass('hidden');
}, function() {
    $(this).find('a').addClass('hidden');
});

---

你为什么要这么做？您的

a

标记应该位于

p

@Sachin的

标记的“顶部”内，您的意思是“结束”（如重叠）？您是否尝试过在

和

上使用

position:absolute

，并将

#personalText

设置为

position:relative

？之所以要这样做，是因为我只想在有人悬停在p标签上时显示此链接。这就像你可以得到一个编辑选项，当你悬停在文本框上，我不希望文本向下移动，以腾出空间的atag@Sachin这是

：hover

伪选择器或JavaScript的完美用例。添加了一些急需的强调。我完全理解这看起来很难看，但正如我在评论中所述在我的目标之上还有别的东西。我将使这个文本有点不透明，只有当有人悬停在文本框上时才会显示它。。。感谢您的强调在这种情况下，我用一个可能的用例更新了答案。在您的情况下，设置

right:5px

起作用，但当我设置该属性时，

editButton

移动到screen@Sachin5px相对于父元素，在本例中为

。如果不设置其宽度，它将延伸到屏幕右侧。

position:absolute

的问题是它现在在左上角显示编辑按钮，如果我想将其放置在右上角，那么我不能只给出

right:0px因为链接会转到屏幕的右端。现在我需要给出精确的像素location@Sachin：这就是为什么要在父对象上设置
位置：相对（
#在本例中为personalText
）。然后，当您使用
right:0px
时，链接将转到父元素的右端。是的，这就是我设置相对位置的原因，因为这样我可以使它转到右角。我甚至看到这篇文章说我可以用
position:relative
@Sachin做这件事：那篇文章已经到了愚蠢的地步。仅使用
position:relative
将一个元素置于另一个元素之上的唯一方法是设置
top
、
left
等，以将元素移动到所需元素之上。元素仍然占据布局中的原始空间（为了渲染和交互目的，布局引擎只是移动表示元素的框），因此如果不改变内容，就无法完成添加链接的目标。@cHao:感谢您的洞察力，我现在会记住这一点，
\personalText>a{display:none；}#personalText:hover>a{display:block；}
。不需要jQuery。虽然它与讨论没有直接关系，但尽可能使用css比javascript有什么固有的优势。我通常使用
#div\u id:hover
功能，但不认为在这种情况下可以使用它also@Sachin
：hover
伪选择器仅在
a标记。对于其他
悬停
效果，您需要JavaScript。如果可能，您应该尝试使用CSS，因为您应该喜欢将样式保留在单个位置，而JS不太适合。但是JS可以做一些很棒的事情，而jQuery尤其有助于制作
悬停
effects跨浏览器。“IE的旧版本”意味着IE6。这一点应该被忽略，IMO.IE7和更高版本不介意
：将
悬停在任何可见元素上，只要它处于标准模式。优点是，即使禁用JS，效果也可以工作。
$('#descText').hover(function() {
    $(this).find('a').removeClass('hidden');
}, function() {
    $(this).find('a').addClass('hidden');
});