CSS에서 요소를 수정하는 방법

CSS에서는 위치 속성을 사용하여 요소를 고정할 수 있습니다. 고정된 위치를 지정하려면 요소에 "position:fixed" 스타일만 추가하면 됩니다. 고정 위치는 창을 기준으로 배치됩니다. 슬라이더의 이동 여부에 관계없이 창을 기준으로 고정된 위치에 고정됩니다. 다른 요소는 위치 배열에서 해당 요소의 존재를 무시합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

#ads{
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    width:300px;
    height:250px;
}

#ads의 id 스타일을 정의하고, 높이와 너비를 설정하고, position:fixed와 right and Bottom을 통해 창의 오른쪽 하단에 요소를 배치합니다.

하지만 IE6에서는 position:fixed 속성이 지원되지 않습니다. 이때 IE6을 해킹해야 합니다. 해결책은 position:absolute 속성을 사용하는 것입니다. 이 기능은 상위 요소를 기준으로 절대 위치 지정을 수행합니다. 그런 다음 표현식을 통해 #ads의 상위 값을 변경할 수 있습니다.

표현식 정의: IE5 이상 버전에서는 CSS 속성을 Javascript 표현식과 연결하기 위해 CSS에서 표현식 사용을 지원합니다. 여기서 CSS 속성은 요소의 고유 속성이거나 사용자 정의 속성일 수 있습니다. 즉, CSS 속성 뒤에는 자바스크립트 표현식이 올 수 있으며, CSS 속성의 값은 자바스크립트 표현식 계산 결과와 동일합니다. 표현식에서 요소 자체의 속성과 메서드를 직접 참조하거나 다른 브라우저 개체를 사용할 수 있습니다. 표현식은 이 요소의 멤버 함수 내에 있는 것과 같습니다.

그래서 CSS에서 javascript 값을 계산하면 상위 값을 변경할 수 있습니다. 코드는 다음과 같습니다.

#ads{
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

모든 것이 완벽해 보이지만 IE6에서 실행해 보면 스크롤 막대가 움직이면서 알 수 있습니다. , 우리의 #adsFriend 그가 흔들릴 것입니다. 해결책도 매우 간단합니다. 다음과 같이 본문에 약간의 CSS를 추가하면 됩니다.

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}

전체 코드:

body{
    background-image:url(about:blank); /* for IE6 */ 
    background-attachment:fixed; /*必须*/
}
#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    _position:absolute;
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    border:1px solid red;
}

권장 학습: css 비디오 튜토리얼

위 내용은 CSS에서 요소를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!