Question

我要做的是使用z-index属性在'p'标记的顶部堆叠'a'标记。所以我的HTML就像这样

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

我的CSS就像这样

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

我认为这应该将a堆叠在p标记之上，但这不会发生。任何人都能解释一下我做错了什么吗？

Answer 1

position: relative不会从布局中分离元素，因此默认情况下元素仍会占用相同的位置。 relative有两个目的：将元素 relative 偏移到布局中的“实际”位置（这需要设置top，left等），并且作为非static值，以便position: absolute的子元素相对于它定位自己。

说了这么多，你想要做的就是你想做的事情，就是在父母身上设置position: relative，在编辑链接上设置position: absolute（至少）。但这可能非常难看，因为文本可能会重叠并且不可读。

Answer 2

以下是将<a>标记置于<p>标记之上的方法：http://jsfiddle.net/gSWJB/1/

该示例显示了一个可能的用例：将链接放在描述的顶部，其中链接可能仅在用户将鼠标悬停在其上时显示。

Answer 3

你还必须把

  #personalText 
  {
    position:relative; 
  } 

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

Answer 4

正如Mihalis Bagos所说，你需要向上推动#descText元素。

以下是生成的CSS：

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

以下是由此产生的jsFiddle。

Answer 5

这是JavaScript的完美用法：

CSS

.hidden { display: none; }

的jQuery

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

<强> DEMO

在'p'标签上堆叠'a'标签

5 个答案: