CSS에서 요소 위치를 변경하지 않고 설정하는 방법

CSS에서 요소 위치를 변경하지 않고 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 "#ads"의 ID 스타일을 정의하고 마지막으로 "위치:고정"을 통해 요소를 지정된 위치에 배치합니다. " 그리고 오른쪽과 아래쪽 위치만요.

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

우리가 자주 직면하는 요구 사항은 스크롤 막대를 어떻게 스크롤하더라도 페이지의 특정 요소가 브라우저의 특정 위치에 고정되기를 원한다는 것입니다. 자주 보는 팝업과 같이 변경되지 않습니다. 방법은 일반적으로 js 컨트롤을 사용하거나 CSS를 사용하는 것입니다. 제가 여기에 쓰는 것은 CSS 제어 방법입니다.

IE7 이상과 Firefox, Opera 및 Safari에서는 CSS 속성 "position:fixed"가 지원됩니다. 해당 기능은 창을 기준으로 요소의 위치를 ​​고정하는 것입니다. 코드는 다음과 같습니다

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

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

위치:고정을 사용하면 브라우저 창을 위치 지정을 위한 참조로 직접 사용할 수 있으며, 요소 위치는 브라우저 창의 화면 위치를 이동하지 않는 한 변경되지 않습니다. 브라우저 창을 화면에 표시하거나 브라우저 창의 표시 크기를 변경하여 고정된 위치의 요소가 항상 브라우저 창 내의 보기 어딘가에 있게 되고 문서 흐름에 영향을 받지 않게 됩니다.

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

PS 표현식 정의: 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; /*必须*/
}

좋아요, 완료되었습니다! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

PS: "url(text.txt)"를 원래 사용했는데 txt가 존재하지 않습니다. http 요청에서 404 오류가 보고되어 로딩 속도에 영향을 미쳤습니다. 인터넷에서 몇 가지 작성 방법을 참고하여 about:blank를 사용했습니다. 동일한 결과를 얻으려면.

ie6는 고정을 지원하지 않는 것이 원칙이지만 스타일 배경은 지터를 제거하는 데 사용할 수 있습니다.

전체 코드:

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에서 요소 위치를 변경하지 않고 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!