สิ่งที่สำคัญที่สุดในการออกแบบหน้าเว็บคือการวางตำแหน่งองค์ประกอบที่เหมาะสม ซึ่งสามารถทำได้ง่ายๆ โดยใช้คลาส 'ตำแหน่ง' ของ Tailwind การวางตำแหน่งอาจมีได้หลายประเภท หนึ่งในนั้นคือแบบคงที่

บล็อกนี้จะสาธิตวิธีการวางตำแหน่งองค์ประกอบแบบคงที่

จะวางตำแหน่งองค์ประกอบแบบคงที่ใน DOM – Tailwind ได้อย่างไร

องค์ประกอบสามารถวางตำแหน่งแบบคงที่ได้โดยใช้ ' คงที่ ” ระดับตำแหน่ง ตำแหน่งคงที่เป็นตำแหน่งเริ่มต้นสำหรับองค์ประกอบ HTML องค์ประกอบที่มี “ ตำแหน่ง: คงที่ ” อยู่ในตำแหน่งตามโฟลว์ปกติของหน้า โดยไม่มีการกำหนดสไตล์ CSS ใดๆ

ไวยากรณ์
ไวยากรณ์สำหรับการประยุกต์ใช้ “ คงที่ ” คลาสคือ:

ในที่นี้ องค์ประกอบสามารถเป็นแท็กใดก็ได้ที่สามารถใช้แอตทริบิวต์ตำแหน่งได้

เยี่ยมชมโค้ดสำหรับการใช้งานจริงของการวางตำแหน่งคงที่:

ในรหัสนี้:

• “ ศูนย์ข้อความ ” ปรับเนื้อหาแท็ก ไปที่กึ่งกลางของหน้าจอ
• ตั้ง '

  ” แท็กเป็นสีเขียวโดยใช้ “ ข้อความสีเขียว-600 ” ขนาดตัวอักษรถูกตั้งค่าเป็นห้าเท่าโดย “ ข้อความ-5×1 ” และแบบอักษรจะถูกเน้นโดยใช้เครื่องหมาย “ แบบอักษรตัวหนา '.

• สอง '
  ” องค์ประกอบจะถูกสร้างขึ้นและกำหนดตำแหน่งด้านซ้ายแบบคงที่สำหรับองค์ประกอบแรก “ กอง ' ใช้ ' ข้อความคงที่ทางซ้าย '.
• กำหนดชั้นเรียนของ “ พี-2 , ' ม-2 , ' บีจี-กรีน-200 , ' เอช-48 ” สำหรับ div ที่สอง และยังตั้งค่าตำแหน่งเป็นซ้ายล่างสุดโดยใช้เครื่องหมาย “ สัมพัทธ์ล่าง-0 ซ้าย-0 ' ระดับ.

เอาท์พุต
บันทึกโค้ดด้านบนลงในไฟล์และดูตัวอย่างหน้าเว็บที่สร้างโดยมันซึ่งจะแสดงเป็น:

องค์ประกอบที่มีตำแหน่งคงที่จะเคลื่อนที่ไปตามการไหลของหน้าปกติ ในขณะที่องค์ประกอบอื่นๆ ยังคงตำแหน่งที่แน่นอนไว้

บทสรุป

หากต้องการวางตำแหน่งองค์ประกอบใน DOM แบบคงที่ตามโฟลว์ปกติของเอกสาร ให้ใช้ปุ่ม “ คงที่ ” คลาสของลมหาง “ ตำแหน่ง ' คุณประโยชน์. บล็อกนี้ได้แสดงวิธีการวางตำแหน่งองค์ประกอบใด ๆ “ แบบคงที่ ” พร้อมสาธิตการใช้งานจริงแบบง่ายๆ