jQuery/CSS 부동/오버레이 도구 모음/버튼

Question

내가 찾고있는 것을 설명하는 데 올바른 용어를 사용하고 있는지 확실하지 않지만 내가 생각해내는 것이 가장 좋습니다.

본질적으로 나는 DIV에 현재 표시하고있는 항목의 목록을 가지고 있습니다. 사용자가 각 항목을 가리키면 jQuery UI 플러그인을 사용하고 스타일을 연결합니다. 이제 마우스를 해당 항목 위로 가져 가면 각 항목의 오른쪽 위 모서리에 작은 도구 모음과 같은 단추 세트가 표시됩니다. 마우스가 위 또는 아래로 다음 항목으로 이동하면 도구 모음이 해당 항목으로 "이동"합니다. 물론, 실제로 움직이지는 않습니다. 저는 각 항목과 관련된 툴바의 가시성을 토글하고 있다고 가정합니다.

후자의 점은 버튼이 각 목록 항목의 id 값으로 인코딩되어 명령이 어떤 항목에 대해 작동하는지 알 수 있다는 것입니다.

내가 알아야 할 것은 툴바의 디스플레이에 영향을받지 않는 내용으로 DIV를 가질 수 있도록 HTML과 CSS를 만드는 방법입니다. 마크 업 및 스타일 설정을 사용하면 툴바가 기존 항목 위에있는 각 항목의 오른쪽 상단 모서리에 나타납니다.

UPDATE는

나는 기본적으로 텍스트와 다른 <DIV> 및 이미지 버튼 (앵커에 싸여 이미지)의 집합을 포함하는 다른 <DIV>를 포함하는 <DIV> 래퍼가 있습니다. 내가 필요한 것은 아래 그림과 같이 <DIV> (또는 다른 요소가 필요합니다.) 버튼이 포함 된 코드가 <DIV>의 상위 오른쪽 구석에 떠있는 것처럼 보입니다. :

그때 표시하고 항목을 가리킬 때 버튼을 숨기기 위해 jQuery를 사용할 수 있습니다.

Answer 1

당신은 단지 HTML/CSS가 필요한 경우이 같은 것을 할 수있는 :

CSS 
/* this contain both your injected JS and your current content */ 
.highlight { background:#ddd; position:relative; overflow:auto; padding:15px;} 
.highlight * {margin:0; padding:0;} 
/* you will place your action buttons here, they seem to be: delete, promote, demote */ 
.highlight .nav { position:absolute; top:0; right:0; background:#333; list-style-type:none; } 
.highlight .nav li {float:left; margin:0 1px; list-style-type:none;} 
/* add the styles per each button, they will all look the same for now */ 
.highlight .nav li a {display:block; height:15px; width:10px; background:red; text-indent:-9999px; cursor:pointer;} 

HTML 
<div class="highlight"> 
    <ul class="nav"> 
    <li><a>DELETE</a></li> 
    <li><a>PROMOTE</a></li> 
    <li><a>DEMOTE</a></li> 
    </ul> 
<p>your current content will be here, could also be a div or anything else, it just needs to be sitting inside the .hightlight div</p> 
</div> 

편집 : 나는 http://jsfiddle.net/edCD3/

행운에 게시 된 코드, 레오와 업데이트