오버플로의 영향을받는 요소 위치 : 숨김

Question

(적어도 나에게) 매우 이상하게 보입니다. 탭 위에 마우스를 가져 가면 높이가 확장되고 메뉴 항목이 표시됩니다. 탭에는 overflow : hidden 속성이있어서 탭에 마우스를 가져갈 때만 항목이 표시됩니다. 정말 이상한 점이 있습니다. 탭 위로 마우스를 가져 가서 확장하면 다른 탭의 맨 아래가 첫 번째 탭의 맨 아래를 따르는 것처럼 보이므로 첫 번째 탭이 확장 될 때 다른 탭이 아래로 이동합니다. 오버플로를 제거하면이 동작이 사라집니다. 숨김! 자, 저는 약간의 입장을 보였습니다. 여기서는 절대 속임수 였지만, 관련 부분이 상대적으로 배치되어 있는지를 두 번 확인했습니다. 그래도이 문제를 일으킬 수있는 아이디어는 없습니다.

HTML

<div id="menu"> 
    <div class="menu-tab">Hover here!</div> 
    <div class="menu-tab">Or here!</div> 
</div> 

CSS

#menu { /* issue disappears without this */ 
    height: 15pt; 
} 

.menu-tab { 
    display: inline-block; 
    height: 100%; /* required for animation, not affecting behavior */ 
    overflow: hidden; /* this one! */ 
    background-color: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    transition: height 0.3s ease; 
} 

.menu-tab:hover { 
    height: 500%; 
} 

JSFiddle

Answer 1

사용,175 : 여기

---

은 아주 최소한의 테스트 케이스입니다 탭에속성 :

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* add this */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}

<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>

Answer 2

당신은 inline-block 요소가 정렬 유지되도록 vertical-align:top;를 추가해야합니다.

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* THIS */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}

<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>