상대 블록이 div의 최상위 위치를 고려하지 않습니다.

테두리가 4px 인 버튼을 만들었습니다. 버튼을 가져 가면서 버튼 밑의 다른 요소에 영향을주지 않으려면 border-bottom-width를 0px로 줄이고 4px를 추가합니다.상대 블록이 div의 최상위 위치를 고려하지 않습니다.

하지만 버튼을 움직이는 동안 버튼 아래의 항목이 움직입니다. 왜냐하면 버튼 뒤의 블록은 4px 상단을 고려하지 않기 때문입니다. 그래서, 좋지 않습니다. 이 문제를 해결하는 방법 ..

.btn{ 
    padding: 30px; 
    background-color: #30d589; 
    cursor: pointer; 
    border-bottom: 4px solid #1b8454; 
} 

.btn:hover{ 
    border-bottom-width: 0px; 
    top: 4px; 
}

내가

출처

2013-10-08 Sriraman

사용'마진 bottom', [예] (http://jsfiddle.net/5mhGt/1/). – Vucko

사용이 CSS를 .. 사전에 jsFiddle

덕분에 내 코드를 업데이트 : 여기

.btn{ 
    padding: 30px; 
    background-color: #30d589; 
    cursor: pointer; 
    border-bottom: 4px solid #1b8454; 
    display: block; 
    float: left; 
    box-sizing: border-box; 
    transition: all 0.2s linear; 
    margin-right: 100%; 
} 

.btn:hover{ 
    margin-top: 4px; 
    border-bottom-width: 0px; 
}

는 작업 바이올린입니다 :

http://jsfiddle.net/Hive7/5mhGt/2/

출처

2013-10-08 18:21:52 Hive7

업데이트 됨 : http://jsfiddle.net/5mhGt/5/. 당신은 margin-bottom 정도와 같은 다른 특성을 가진 엉망이없는

.btn:hover { 
    border-bottom-color: transparent; 
}

문제를 해결하는 가장 쉬운 방법은 투명 테두리를 만드는 것입니다. 나중에 테두리 너비를 변경하기로 결정하면이 여백을 항상 염두에 두지 않아도됩니다.

출처

2013-10-08 18:26:04 matewka

테두리를 투명하게 만들면 호버링 중에 전환 효과가 적용되지 않습니다. 어쨌든 해결책은 http://jsfiddle.net/Hive7/5mhGt/2/ 감사합니다 ... – Sriraman

나는 귀하의 질문을 이해하게됩니다. 나는 당신이 단추가 그것의 고도를 유지하고 싶다고 생각했다. – matewka

: 호버 (hover) 상태에 애니메이션을 적용하는 동안 테두리 색을 유지하고 텍스트가 흔들리는 것을 방지하려면 비교적 배치 된 컨테이너에 단추를 배치하십시오.

그런 다음 CSS를 업데이트

.btn-wrapper { 
position: relative; 
height: 100px; 
} 

.btn{ 
position: absolute; 
top: 8px; 
padding: 30px; 
background-color: #30d589; 
cursor: pointer; 
border-bottom: 4px solid #1b8454; 
display: inline-block; 
transition: 0.2s; 
} 

.btn:hover{ 
top: 12px; 
border: 0px; 
}

jsfiddle : http://jsfiddle.net/BpL2A/

출처

2013-10-08 18:30:30 MrMerrick

상대 블록이 div의 최상위 위치를 고려하지 않습니다.

답변

관련 문제