CSS ระบบจัดเรียง - คุณสมบัติ position

position ระบุประกาศสำหรับชนิดวิธีการจัดตั้งตำแหน่งองค์ประกอบ (static, relative, fixed, absolute หรือ sticky)

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

这个 <div> 元素设置了 position: static;

这是所用的 CSS：

ตัวอย่าง

div.static {
  position: static;
  border: 3px solid #73AD21;
}

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

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

这个 <div> 元素设置了 position: relative;

这是所用的 CSS：

ตัวอย่าง

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

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

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS：

ตัวอย่าง

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

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

这个 <div> 元素设置了 position: fixed;

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

ข้อเน้นตัว“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：

这个 <div> 元素设置了 position: relative;
这个 <div> 元素设置了 position: absolute;

这是所用的 CSS：

ตัวอย่าง

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

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

position: sticky;

position: sticky; องค์ประกอบนี้จะตำแหน่งตามตำแหน่งเลื่อนของผู้ใช้

องค์ประกอบ sticky จะตำแหน่งตามตำแหน่งเลื่อนของผู้ใช้relative) และ fixed (fixed) ระหว่างกันเพื่อเปลี่ยนเป็นตำแหน่ง sticky

ข้อเน้นตัวInternet Explorer, Edge 15 และเวอร์ชั่นต่ำกว่านี้ไม่สนับสนุนการตำแหน่ง sticky ควรใช้ -webkit- prefix (ดูตัวอย่างด้านล่าง) คุณยังต้องกำหนดอย่างน้อย top、right、bottom หรือ left หนึ่งในนี้ เพื่อให้การตำแหน่ง sticky ทำงานได้

ในตัวอย่างนี้ ตอนที่องค์ประกอบ sticky ไปถึงตำแหน่งที่เลื่อนของเว็บไซต์ องค์ประกอบนี้จะอยู่ที่ด้านบนของหน้าเว็บ (top: 0）。

ตัวอย่าง

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

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

องค์ประกอบที่ชนกัน

ในขณะที่ทำการตำแหน่งองค์ประกอบ พวกมันอาจชนกันกับองค์ประกอบอื่น。

z-index คุณสมบัตินี้กำหนดลำดับที่วางขององค์ประกอบ (องค์ประกอบใดที่ควรวางข้างหน้าหรือข้างหลังองค์ประกอบอื่น)。

องค์ประกอบสามารถตั้งค่าลำดับที่วางเป็นบวกหรือลบ:

นี่คือข้อความหัวเรื่อง

เนื่องจาก z-index ของภาพคือ -1 ดังนั้นมันจะอยู่ข้างหลังข้อความ。

ตัวอย่าง

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

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

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

ข้อเน้นตัวถ้าสององค์ประกอบที่ตำแหน่งนั้นชนกันแต่ไม่ได้กำหนด z-indexถ้าไม่ได้กำหนด ส่วนที่อยู่ท้ายสุดของ HTML จะแสดงที่ด้านบน。

ตำแหน่งข้อความในภาพ

วิธีการจัดวางข้อความบนภาพ:

ตัวอย่าง

CodeW3C.com โลโก
ขวาล่าง
ขวาบน
ซ้ายบน
ซ้ายล่าง
ศูนย์ตรง

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

ขวาบน ซ้ายบน ขวาล่าง ซ้ายล่าง ศูนย์ตรง

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

ตั้งค่ารูปร่างขององค์ประกอบ
ตัวอย่างนี้แสดงวิธีการตั้งค่ารูปร่างขององค์ประกอบ。องค์ประกอบถูกตัดเอาเป็นรูปร่างนี้และแสดงออกมา。

ทั้งหมดคุณสมบัติการตำแหน่ง CSS

คุณสมบัติ รายละเอียด
bottom ตั้งค่าขอบเขตด้านล่างของมุมนอกของกล่องตำแหน่ง。
clip ตัดตัวอักษรที่ตั้งตำแหน่งอัตรา
left ตั้งค่าขอบเขตด้านซ้ายของกล่องตำแหน่ง
position กำหนดชนิดการตั้งตำแหน่งขององค์ประกอบ
right ตั้งค่าขอบเขตด้านขวาของกล่องตำแหน่ง
top ตั้งค่าขอบเขตด้านบนของกล่องตำแหน่ง
z-index ตั้งค่าลำดับการเรียงขององค์ประกอบ

การอ่านข้างเคียง

หนังสือเกี่ยวกับ课外书：CSS สรุปการตั้งตำแหน่ง

หนังสือเกี่ยวกับ课外书：CSS การตั้งตำแหน่งเชิงเฉียง

หนังสือเกี่ยวกับ课外书：CSS การตั้งตำแหน่งเชิงอัตรา