Форма отправки кнопки, фиксированная/абсолютная

Question

У меня есть комментарии, которые повторяются из моей БД в их собственные, содержащие div.

В этом div у меня есть «скрытая» форма, содержащая кнопку отчета и/или удаления.

При наведении комментария отображается форма и отображаются только две кнопки.

Это прекрасно работает. Однако я хочу, чтобы форма кнопок всегда была в одном месте.

В данный момент он сидит, если текст комментария короткий, но как только комментарий содержит более 1 строки, div находится под содержимым.

Я просто хочу, чтобы оно было исправлено в одном и том же месте, в каждом отдельном комментарии div. Независимо от того, сколько строк это и т.д.

Здесь пока скрипку показывает простой пример того, что я имею в виду:

http://jsfiddle.net/qzj49/

мне просто нужна форма с кнопками, чтобы быть фиксированными, и появляюсь над текстом комментария.

код просто упаковывают:

CSS:

.textcomment { 
    color: #666; width: 98%; 
    padding-left: 1%; 
    padding-right: 1%; 
    font-size: 12px; 
    padding-bottom: 1%; 
    padding-top: 1%; 
    border-bottom: 1px solid #ccc; 
} 

.textcomment:hover {background-color: #efefef;} 
.nocomments { 
    width: 100%; 
    color: #888; 
    font-size: 12px; 
    padding-bottom: 1%; 
    padding-top: 1%; 
} 

.commentActionButton { 
display: none; 
top: 0; 
float:right; 
width: 14%; 
z-index: 999; 
} 

.delrepcomment {} 

.deletecommentsubmit { 
background-color: #F00; 
border: none; 
color: #fff; 
opacity: 0.4; 
float:right; 
width: 48%; 
margin-right: 0%; 
padding: 2%; 
} 

.reportcommentsubmit { 
background-color: #F90; 
border: none; 
color: #fff; 
opacity: 0.4; 
float:right; 
width: 48%; 
margin-right: 4%; 
padding: 2%; 
} 

.reportcommentsubmit:hover, .deletecommentsubmit:hover { 
opacity: 0.9; 
cursor: pointer; 
} 

HTML:

<div class='textcomment'> 
    <a class='userights1'>Username:</a>&nbsp; 
    This is a comment 
    <div class='commentActionButton'> 
     <form action='#' method='post' class='delrepcomment'> 
      <input type='hidden' name='delcommentid'> 
      <input type='hidden' name='postowner'> 
      <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'> 

     </form> 
     <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div> 
</div> 

<div class='textcomment'> 
    <a class='userights1'>Username:</a>&nbsp; 
    This is a comment that extends to more than 1 line long... This is a comment that extends to more than 1 line long... 
    <div class='commentActionButton'> 
     <form action='#' method='post' class='delrepcomment'> 
      <input type='hidden' name='delcommentid'> 
      <input type='hidden' name='postowner'> 
      <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'> 
     </form> 
     <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div> 
</div> 

<div class='textcomment'> 
    <a class='userights1'>Username:</a>&nbsp; 
    This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... 
    <div class='commentActionButton'> 
     <form action='#' method='post' class='delrepcomment'> 
      <input type='hidden' name='delcommentid'> 
      <input type='hidden' name='postowner'> 
      <input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'> 
     </form> 
     <input class='reportcommentsubmit' name='submit-report' type='submit' value='report'> 
    </div> 
</div> 

JQuery:

// Show the delete/report comment on hover 
$(".textcomment").hover(function() { 
    var $this = $(this);  
    $(this).closest('.textcomment').find('.commentActionButton').toggle(); 
}); 

Answer 1

Простая позиция набор контейнер относительны, и положение формы дел до абсолютной:

.textcomment {color: #666; width: 98%; padding-left: 1%; padding-right: 1%; font-size: 12px; padding-bottom: 1%; padding-top: 1%; border-bottom: 1px solid #ccc;position:relative;} 
.textcomment:hover {background-color: #efefef;} 
.nocomments {width: 100%; color: #888; font-size: 12px; padding-bottom: 1%; padding-top: 1%;} 

.commentActionButton { 
    display: none; 
    top: 0; 
    right:0; 
    position:absolute; 
    width: 14%; 
    z-index: 999; 
} 

http://jsfiddle.net/qzj49/1/