DHTML CSS Positioning (CSS-P)

CSS ใช้เพื่อเพิ่มสไตล์ไปยังองค์ประกอบ HTML。

ตัวอย่าง

หมายเหตุ：ส่วนใหญ่ของตัวอย่าง DHTML ต้องการ IE 4.0+ หรือ Netscape 7+ หรือ Opera 7+!

position:relative
การจัดตำแหน่งองค์ประกอบนี้เอาไว้ตามตำแหน่งปกติขององค์ประกอบ
position:relative
การจัดตำแหน่งหัวข้อทั้งหมดเอาไว้ตามตำแหน่งปกติ
position:absolute
การใช้ค่าอัตราส่วนเพื่อจัดตำแหน่งองค์ประกอบ

คุณสามารถหาตัวอย่างเพิ่มเติมได้ที่ด้านล่างของหน้า

รายการใดที่สามารถใช้ร่วมกับ CSS-P?

สิ่งแรก องค์ประกอบนี้ต้องมีการกำหนดรายการ position (relative หรือ absolute)

ดังนั้น ฉันสามารถตั้งค่า CSS-P ต่อไปนี้ได้

  • left - ตำแหน่งด้านซ้ายขององค์ประกอบ
  • top - ตำแหน่งด้านบนขององค์ประกอบ
  • visibility - กำหนดว่าองค์ประกอบควรเห็นได้หรือไม่
  • z-index - ลำดับการเรียงขององค์ประกอบ
  • clip - การตัดองค์ประกอบ
  • overflow - การจัดการกับสิ่งที่หลุดออกมา

Position

รายการ position ของ CSS อนุญาตให้คุณควบคุมการจัดตำแหน่งขององค์ประกอบในเอกสาร

position:relative

position:relative รายการจัดตำแหน่งองค์ประกอบตามตำแหน่งปกติขององค์ประกอบนี้

ตัวอย่างดังกล่าวจะจัดตำแหน่งองค์ประกอบ div โดยใช้จุดมาตรฐานมาจากตำแหน่งปกติขององค์ประกอบนี้ 10 พิกเซลข้างขวา

div
{
position:relative;
left:10;
}

position:absolute

position:absolute รายการจัดตำแหน่งองค์ประกอบโดยใช้ margin จากหน้าต่าง

ตัวอย่างดังกล่าวจะจัดตำแหน่งองค์ประกอบ div โดยใช้จุดมาตรฐานมาจากมุมของ margin ของบล็อคที่มีความยาวมากที่สุดขององค์ประกอบนี้ 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。

Filters

filter รายการสามารถให้คุณเพิ่มสไตล์ที่มีประโยชน์มากขึ้นสำหรับข้อความและรูปภาพ。

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

หมายเหตุ：หากต้องการใช้ filter ต้องการระบุความกว้างขององค์ประกอบตลอดเวลา

ตัวอย่างด้านบนกำลังสร้างออกมาดังนี้：

หัวข้อ

ต่าง ๆ ของ filter

หมายเหตุ：หาก background-color จะถูกตั้งเป็น transparent บางครั้ง 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 ขององค์ประกอบนี้ได้เปลี่ยนแล้ว
Cursors
เปลี่ยนรูปแบบของตามุมหมุนด้วย CSS
Filters
ใช้คุณสมบัติ filter ที่จะเปลี่ยนรูปแบบของข้อความ
Filters on Images
คุณสมบัติ filter ก็สามารถนำไปใช้กับภาพด้วย ตรงนี้มีตัวอย่างภาพที่ได้ใช้คุณสมบัติ filter
Watermark
ภาพพื้นหลังที่ไม่เคลื่อนตัวเมื่อหน้าเว็บไล่ตาม