DHTML CSS Positioning (CSS-P)

CSS는 HTML 요소에 스타일을 추가하는 데 사용됩니다.

예제

주석:대부분의 DHTML 예제는 IE 4.0+、Netscape 7+ 또는 Opera 7+가 필요합니다!

position:relative
요소의 정상적인 위치에 대해 이 요소를 어떻게 정위치하나요?
position:relative
모든 제목을 정상적인 위치에 대해 어떻게 정위치하나요?
position:absolute
요소를 정의하는 데 사용할 수 있는 절대값은 어떻게 사용하나요?

아래에 더 많은 예제를 찾을 수 있습니다.

CSS-P와 함께 사용할 수 있는 속성은 무엇인가요?

먼저, 이 요소는 position 속성(absolute 또는 relative)을 지정해야 합니다.

그런 다음, 다음과 같은 CSS-P 속성을 설정할 수 있습니다:

  • left - 요소의 왼쪽 위치
  • top - 요소의 상단 위치
  • visibility - 요소가 보이거나 숨겨지는지 지정
  • z-index - 요소의 쌓임 순서
  • clip - 요소 잘라내기
  • overflow - 초과된 내용 처리

Position

CSS의 position 속성은 문서 중 특정 요소의 정위치를 제어할 수 있습니다.

position:relative

position:relative 속성은 요소의 현재 위치에 대해 이 요소를 정위치합니다.

아래의 예제는 이 div 요소를 그 정상적인 위치에서 10픽셀 오른쪽으로 정위치합니다:

div
{
position:relative;
left:10;
}

position:absolute

position:absolute 속성은 창의 마진에 따라 요소를 정위치합니다.

아래의 예제는 이 div 요소를 그 컨테이너의 왼쪽 마진에서 10픽셀 떨어진 위치로 정위치합니다:

div
{
position:absolute;
left:10;
}

Visibility

visibility 속성은 요소가 보이는지 여부를 결정합니다.

visibility:visible

visibility:visible 속성은 요소를 보이게 합니다.

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden 속성은 요소를 보이지 않게 합니다.

h1
{
visibility:hidden;
}

Z-index

z-index 속성은 하나의 요소를 다른 요소 뒤에 배치하는 데 사용됩니다. z-index의 기본 값은 0입니다. 값이 높을수록 우선순위도 높습니다. z-index: -1은 더 낮은 우선순위입니다.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

위의 예제에서 h1과 h2가 서로 겹치면 h2 요소가 h1 위에 위치합니다.

필터

filter 속성은 텍스트와 이미지에 더 많은 스타일 효과를 추가할 수 있도록 합니다.

h1
{
width:100%;
filter:glow;
}

주석:filter 속성을 사용하려면 항상 요소의 너비를 지정해야 합니다.

위의 예제는 아래의 출력을 생성합니다:

헤더

다양한 필터

주석:background-color 속성이 투명으로 설정되지 않는 한, 일부 Filter 속성은 작동하지 않습니다!

속성 파라미터 설명 예제
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
요소의 투명도를 설정할 수 있습니다
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
요소를 흐릿하게 합니다
filter:blur(
add=true,
direction=90,
strength=6);
chroma color 지정된 색상을 투명하게 합니다
filter:chroma(
color=#ff0000)
fliph none 수평으로 반전합니다 filter:fliph;
flipv none 수직으로 반전합니다 filter:flipv;
glow
  • color
  • strength
요소를 빛나게 합니다
filter:glow(
color=#ff0000,
strength=5);
gray none 검은색과 흰색으로 요소를 표시합니다 filter:gray;
invert none 반전된 색상과 밝기 값을 사용하여 요소를 표시합니다 filter:invert;
mask color 지정된 배경색과 투명한 전경색을 가진 요소를 표시합니다
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
그림자를 가진 요소를 표시합니다
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
그림자를 가진 요소를 표시합니다
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
요소를 파도 모양으로 표시합니다
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none 반전색과 밝기 값이 있는 요소를 검은색과 흰색으로 표시합니다. filter:xray;

Background

background 속성은 사용자의 배경을 선택할 수 있도록 합니다.

background-attachment:scroll

배경은 페이지가 스크롤될 때 이동합니다.

background-attachment:fixed

배경은 페이지가 스크롤될 때 이동하지 않습니다.

更多实例

Visibility
어떤 요소를 보이지 않게 할까요? 이 요소를 보이시겠습니까?
Z-index
Z-index는 Z-index 순서를 사용하여 다른 요소 뒤에 요소를 배치하는 데 사용될 수 있습니다.
Z-index
이제 요소의 Z-index 순서가 변경되었습니다.
커서
CSS를 사용하여 마우스 포인터의 스타일을 변경할 수 있습니다.
필터
filter 속성을 사용하여 제목의 스타일을 변경할 수 있습니다.
이미지에 대한 필터
filter 속성은 이미지에도 적용될 수 있으며, 여기에는 filter 속성이 적용된 이미지 예제가 몇 가지 있습니다.
워터마크
페이지가 스크롤될 때 배경 이미지가 움직이지 않습니다.