위치 지정 및 Z- 인덱스 관련 문제

Question

메뉴가 겹치는 내용을 갖기 위해 노력하고 있지만 지금은 내용 상자를 멀리 옮깁니다.

나는 이미 position: relative 트릭을 시도했지만 문제는 사라지지 않는 것 같습니다. 그 해결책은 아마도 명백한 무언가 일 것이지만 그것을 찾는 데 도움이 필요합니다.

편집 : 죄송합니다, 추가하는 것을 잊어 버렸습니다. 상자도 크기 조정 가능()되어 절대 위치 지정을 피하려고합니다. EDIT2 : 신경 쓸, right:5px 해결되는 문제

JSFiddle

HTML

<div class="box"> 
    <div class="top"> 
     <div class="icon"></div> 
     <div class="menubox"> 
      <ul class="menu"> 
       <li><a href="#">Menu Option 1</a> 

       </li> 
       <li><a href="#">Menu Option 2</a> 

       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="content"> 
     <p>content goes here</p> 
    </div> 

    <div class="content"> 
     <p>content goes here</p> 
    </div> 
</div> 

CSS

.box { 
    width: 400px; 
    height: 200px; 
    margin: 5px; 
    float: left; 
    background: LightGray; 
    border: 1px solid DarkGray; 
    overflow: hidden; 
} 
.top { 
    width: 100%; 
    height: 25px; 
    background: lightblue; 
} 
.icon { 
    float: right; 
    background: red; 
    height: 15px; 
    width: 15px; 
    margin: 5px; 
} 
.menubox { 
    float: right; 
    background: yellow; 
    position: relative; 
    z-index:100; 
    width: 150px; 
} 
.content { 
    width: 180px; 
    height: 165px; 
    margin: 0px 10px 47px; 
    float: left; 
    position: relative; 
    z-index: 0; 
    display: block; 
    background:DarkGray; 
} 
li { 
    list-style-type: none; 
    text-decoration: none; 
} 
ul { 
    margin:none; 
    padding:none; 
} 

JS/jQuery를

$('.icon').mouseover(function() { 
    $(".menu").show(); 
}); //toggle menu on hover 
$(".menu").mouseleave(function() { 
    $(this).hide(); 
}); 

Answer 1

사용 position: absolute을? fiddle

.menubox { 
    float: right; 
    background: yellow; 
    position: relative; 
    z-index:100; 
    width: 150px; 
    top: 25px; 
    right: 5px; 
    position: absolute; 
} 
.box { 
    width: 400px; 
    height: 200px; 
    margin: 5px; 
    float: left; 
    background: LightGray; 
    border: 1px solid DarkGray; 
    overflow: hidden; 
    position: relative; /* add this */ 
} 

편집 : 더 나은 위치

Answer 2

노란색 menubox는 문서의 흐름을 방해하지 않도록 절대 배치해야합니다 (공간 차지).

는 줘 position:absolute;

는 또한 .box 소자는 상자에 position:relative 그래서 메뉴 상대적인 위치를 가질 필요가있다.

는 당신을 위해 바이올린을 업데이트 :

http://jsfiddle.net/CcVnL/11/

Answer 3

내가 코드를 업데이트 한 아래의 링크를 확인하십시오. "jsfiddle.net/CcVnL/9/"