ставить тег «a» поверх тега «p»

Question

То, что я пытаюсь сделать, это поместить тег 'a' поверх тега 'p', используя свойство z-index.Таким образом, мой 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 имеет две цели: сместить элемент относительно в его «реальное» положение в макете (что потребует установки top, left и т. Д.) И служить неstatic значение, чтобы дочерние элементы с position: absolute позиционировали себя относительно него.

С учетом всего сказанного, что вы, вероятно, хотите, чтобы сделать то, что вы пытаетесь сделать, это установить position: relative на родителе и position: absolute на ссылке редактирования (как минимум).Но это, вероятно, было бы довольно уродливо, так как текст, скорее всего, совпадал бы и был бы нечитабельным.

Answer 2

Это идеальное использование для JavaScript:

CSS

.hidden { display: none; }

JQuery

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

DEMO

Answer 3

Как утверждает Михалис Багос, вам нужно переместить элемент #descText вверх.

Вот такой CSS:

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

Вот jsFiddle , полученный в результатеэто.

Answer 4

Вы должны также поставить

  #personalText 
  {
    position:relative; 
  } 

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

Answer 5

Вот как вы можете поместить тег <a> поверх тега <p>: http://jsfiddle.net/gSWJB/1/

В примере показан один из возможных вариантов использования: размещение ссылки в верхней части описания, гдессылка может быть показана только тогда, когда пользователь наводит на нее курсор.