CSS (웹킷) : 절대 위치 요소에서 상단을 하단으로 재정의


82

일부 플러그인 CSS를 재정의하는 데 문제가 있습니다. CSS를 직접 편집하는 것은 플러그인 업데이트를 더 위험하게 만들 수 있으므로 실제로는 선택 사항이 아닙니다.

문제 : 요소에 절대 위치가 있고 원본에서 top : 0px가 있습니다. bottom : 0px로 재정의하고 싶습니다.

예를 들어

    .element {position:absolute; top:0;}

    /* in another file */
    .my .element {bottom:0;}

파이어 폭스에서는 제대로 작동하지만 (bottom : 0이 적용된 스타일 임), safari / chrome이 top : 0을 넘지 않는 것 같습니다.

이 문제를 해결할 수 있지만 깨끗한 해결책을 찾는 것이 좋을 것입니다.


하단은 웹킷의 경우에도 적용되었으며 하단 정의는 더 구체적이었습니다. ! important는 "더 구체적"이라고 말하면됩니다. 문제는 상단을 먼저 계산하는 것 같아서 재설정하는 방법이 필요했습니다.
Marcus

답변:


195

초기 값top: auto 으로 "재설정"하는 top데 사용 합니다 .

bottomtop( 요소topbottom 는 a와를 모두 가질 수 있음 ) 완전히 별개의 속성 이므로 bottom더 이상 필요 하지 않을 것입니다.

또한 재정의 선택기가 충분히 구체적 인지 확인하세요 .하지만이 경우 문제인 것 같지는 않습니다.


5
top : auto는 내가 찾던 것이었다. 사이트 포인트 CSS 참조 등 문서를 확인했지만 찾을 수 없습니다. 시도한 top : none (무작위 : D). 감사.
Marcus

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.