의사 요소가 오버플로 숨겨진 div 외부에 있지 않음

div가 overflow-y : hidden입니다. 그리고 div의 바깥쪽에 위치시키고 자하는 버튼의 오른쪽에 의사 요소가 있지만 작동하지 않습니다. 여기는 바이올린입니다 - http://jsfiddle.net/PAdSd/1/.의사 요소가 오버플로 숨겨진 div 외부에 있지 않음

하지만 div가 오버플로가 없으면 div 괜찮을 것입니다. 여기는 바이올린입니다 - http://jsfiddle.net/PAdSd/2/.

어떤 도움 그게 당신이 그것을 말한 무엇 때문에이 숨겨진

출처

2012-01-28 theliberalsurfer

position: relative을 .nav에서 제거하십시오. 결과는 this jsfiddle입니다.

비슷한 문제가 내 머리를 며칠 동안 벽에 부딪치게했다. 시행 착오와 순수한 기회가 해결책을 만들어 냈습니다. 크로스 브라우저 호환성에 대해서는 잘 모르지만 크롬과 파이어 폭스에서 작동합니다 (CSS30 속성에 -moz 접두어가 붙어있는 한).

이 콘텐츠를 볼 수 있도록하려면 : (의사 요소를 100 % : 높이를 사용하기 때문에 말의 상대 방금 위치를 제거 할 수없는 경우에 특히 유용합니다)

출처

2012-01-28 09:25:49 magicalex

멋지지만, 절대적으로 배치 된 nav 내부의 요소가 필요합니다. – theliberalsurfer

div에서'.nav'를'position : relative'로 감쌀 수 있습니다. (http://jsfiddle.net/magicalex/yatSy/). 그것은 조금 div 수프지만, 내가 생각해내는 것이 가장 좋습니다. – magicalex

예치, 그것은 꽤 사납다. 최후의 수단. – theliberalsurfer

멋진 것입니다. 당신이 숨겨진 싶지 않아,하지만 여전히 오버 플로우 숨겨진 원하는 경우

http://jsfiddle.net/PAdSd/3/

당신은 더 높은 위치를 변경해야합니다. .nav:after은 콘텐츠를 끝에 배치하지만 nav 태그 내부에 배치합니다.

상단 CSS 값을 조정하여 더 높은 위치에 배치 할 수 있습니다.

.nav:after{ 
    content: ""; 
    border-radius: 5px; 
    background: #000; 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    left: 500px; 
    margin-left: 1px; 
    top: 10px; 
    box-shadow: -5px 5px 0px #8f0222; 
    z-index: 20; 
}

또는 당신은 몸을 사용할 수 있습니다 : 당신이 실제로 탐색 모음 안에 원하는 것처럼 소리를하지 않는 대신 후, 때문이다.

출처

2012-01-28 04:52:31 mrtsherman

내가는 탐색 아래를 필요로하고 내가 오버 플로우가 – theliberalsurfer

@AndrewMilson 숨겨진 갖도록 탐색이 필요합니다 - 당신은 네비게이션 바의 내부를 배치 할 수 없습니다. 어깨를 으해라. 대신 몸에 넣을 수 있습니까? 다른 div에서 래핑 할 수도 있지만 어딘가에 가야합니다. http://jsfiddle.net/PAdSd/4/ – mrtsherman

정말 좋은 제안은 아닙니다. – theliberalsurfer

다음은이 문제를 해결하는 또 다른 방법 하단에 패딩을 추가합니다 (예 : 10 픽셀). 그런 다음 다른 요소에 대한 패딩 효과를 제거하려면 margin-bottom을 사용하십시오. -10px;

그래서 :

.nav{ 
    background: transparent; 
    height: auto; 
    overflow-y: hidden; 
    position: relative; 
    /*new stuff*/ 
    padding-bottom:10px; 
    margin-bottom:-10px; 
}

출처

2014-03-30 19:29:57

의사 요소가 오버플로 숨겨진 div 외부에 있지 않음

답변

관련 문제