วิธีการสร้าง: สมุนไพรสถานะในการปรับตำแหน่ง

เรียนรู้ว่าจะใช้ CSS สร้างสมุนไพรสถานะในการปรับตำแหน่ง

ลองเดี๋ยวเองด้วยเรา

แจ้งเตือน:ตัวอย่างนี้ไม่สามารถใช้กับอินเตอร์เน็ต อีเชอร์ โอเวอร์ลาพ 15 และรุ่นเก่ากว่า

สมุนไพรสถานะในการปรับตำแหน่ง

ตัวอย่าง

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

ลองเดี๋ยวเองด้วยเรา

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

สมุนไพรสถานะในการปรับตำแหน่งสำหรับการเปลี่ยนสถานะจากตำแหน่งเหนือของป้ายตั้ง และตำแหน่งติดตาย จะขึ้นอยู่กับตำแหน่งของการเลื่อนเล็งของผู้ใช้ ก่อนที่จะขึ้นที่ตำแหน่งอย่างเฉพาะที่กำหนดแล้วในกล่องที่มองเห็น มันจะปรับตำแหน่งเหนือของป้ายตั้ง และหลังจากนั้นมันจะ 'ติด' ตัวเองดังกล่าว (เหมือน position:fixed)

แจ้งเตือน:อินเตอร์เน็ต อีเชอร์ โอเวอร์ลาพ 15 และรุ่นเก่ากว่าไม่สนับสนุนการใช้ตำแหน่งเหนือของป้ายตั้งตำแหน่งเหนือตรง และ Safari ต้องการ -webkit- prefix (ดูตัวอย่างด้านล่าง) เพื่อที่จะให้ตำแหน่งเหนือของป้ายตั้งเหนือของป้ายตั้งสามารถทำงานได้ ยังต้องกำหนดอย่างน้อย top, right, bottom หรือ left หนึ่งตัว

相关页面

教程:CSS 定位