CSS top 属性

การกำหนดและการใช้งาน

ทางนิยาม top กำหนดเส้นเว้นบนขององค์ประกอบที่มีการจัดตำแหน่ง โดยกำหนดระยะห่างระหว่างบริเวณเส้นนอกขององค์ประกอบที่มีการจัดตำแหน่งและบริเวณบนขององค์ประกอบที่มีการเก็บข้อมูล

หมายเหตุถ้าค่าขององค์ประกอบ position มีค่าเป็น static การตั้งค่าของ top จะไม่มีผล

ชี้แจง

สำหรับองค์ประกอบที่มีการประกาศเป็น static จะตั้งเป็น auto สำหรับค่าขนาดจะตั้งเป็นค่าที่ตรงกันข้าม สำหรับอัตราส่วนเปอร์เซ็นต์จะตั้งเป็นค่าที่กำหนด และสำหรับอื่น ๆ จะตั้งเป็น auto

สำหรับองค์ประกอบที่มีการประกาศเป็น relatif ถ้าทั้ง top และ bottom ตั้งเป็น auto ตัวเลขที่คำนวณออกมาจะตั้งเป็น 0 ถ้าหนึ่งในบางองค์ประกอบตั้งเป็น auto ก็จะใช้ค่าขององค์ประกอบอื่นๆ ที่ตั้งเป็น 0 ขณะที่อีกองค์ประกอบจะใช้ค่าตรงกันข้ามกับองค์ประกอบที่ตั้งเป็น auto ถ้าทั้งสององค์ประกอบตั้งเป็น 0 ก็จะใช้ค่าของ top ที่ตรงกันข้าม

ดูเพิ่มเติม

ตัวอย่าง CSSการจัดตำแหน่ง CSS

คู่มือ HTML DOMทางนิยาม top

ตัวอย่าง

ตั้งตำแหน่งด้านบนของภาพของคุณเพื่อให้ตั้งตำแหน่งด้านบนที่ต่ำกว่าด้านบนขององค์ประกอบที่มีขนาด 5 พิกเซล

img
  {
  position:absolute;
  top:5px;
  }

ทดลองด้วยตัวเอง

ระบบการแสดงผลภาษา CSS

top: auto|length|initial|inherit;

ค่าทางนิยาม

ค่า รายละเอียด
auto ค่าเริ่มต้น
% ตั้งตำแหน่งด้านบนขององค์ประกอบด้วยอัตราส่วนเปอร์เซ็นต์ โดยสามารถใช้ค่าลบได้
length ตั้งตำแหน่งด้านบนขององค์ประกอบด้วยหน่วยเมตรเท่าเทียมเช่น px, cm และอื่น ๆ โดยสามารถใช้ค่าลบได้
inherit กำหนดให้ค่าของ top จากเอลิเมนต์พ่อต้องมีความสัมพันธ์กับเอลิเมนต์ลูก

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: auto
การสืบทอด: no
เวอร์ชั่น: CSS2
ระบบแสดงผลภาษาจาวาสคริปต์: object.style.top="50px"

ตัวอย่างเพิ่มเติม

การตั้งตำแหน่งด้านบนของภาพด้วยค่าที่เป็นตัวเลขเฉพาะ
ตัวอย่างนี้แสดงว่าเป็นทางเลือกที่จะใช้ค่าที่เป็นตัวเลขเฉพาะเพื่อตั้งตำแหน่งด้านบนของภาพ
การตั้งตำแหน่งด้านบนของภาพด้วยอัตราส่วน
ตัวอย่างนี้แสดงว่าเป็นทางเลือกที่จะใช้อัตราส่วนเพื่อตั้งตำแหน่งด้านบนของภาพ

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเฉพาะบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ในฐานะที่สำคัญ

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0