유체 폭 및 부유 물체 가능성

유체 폭 레이아웃을 만드는 일반적인 기술은 메인 콘텐츠가 최소 및 최대 너비를 갖도록 한 다음 다양한 기법으로 모든 브라우저에서 작동하는지 확인하는 것입니다.

또 다른 방법은 브라우저 창 자체에 상대적인 절대 위치를 페이지에 부여하는 것입니다. 예를 들어, 페이지 하단에 요소를 "붙일" 수 있습니다.

div#stickbottom {
    position: absolute;
    bottom: 0;
}

마찬가지로 페이지의 아무 영역에나 요소를 붙일 수 있습니다. 백분율로 요소를 배치하면 더욱 흥미롭습니다. 예를 들어 다음과 같은 방법으로 요소를 페이지의 오른쪽 가장자리에서 항상 10% 떨어지게 할 수 있습니다.

div #farright {
    position: absolute;
    right: 10%;
}

이 기술을 사용하면 사용자가 브라우저 창을 확장하고 연결할 때 "오른쪽 여백" 거리가 커지고 축소됩니다. 이렇게 하면 몇 가지 시원한 가능성과 다른 요소와의 상호작용을 만들 수 있습니다. 여기서 예제 페이지를 체크아웃할 수 있습니다.

이 예가 해킹 없이 PNG 그래픽을 많이 사용하고 있다는 것을 금방 알아차릴 수 있을 것입니다. 인터넷 익스플로러 6에서는 하얀 배경의 사진이 많이 나오면 끔찍해 보일 거예요. 이것은 단지 가능성을 보여주는 것일 뿐이고, 자유롭게 자신의 해킹을 구현하거나 GIF를 사용하거나 투명성이 필요한 개체를 사용하지 않도록 하기 위한 것입니다.

[다운로드 예제]