คำแนะนำทีละขั้นตอนเกี่ยวกับตำแหน่ง CSS

คุณสมบัติตำแหน่ง CSS จะปรับเปลี่ยนตำแหน่งขององค์ประกอบในหน้า HTML คุณสมบัติด้านบน ขวา ซ้าย และด้านล่างกำหนดตำแหน่งองค์ประกอบที่สัมพันธ์กับขอบของกล่อง คุณสมบัติ CSS ตำแหน่งมีห้าค่า:คงที่ คงที่ สัมพันธ์ เหนียว และแน่นอน

การจัดตำแหน่งองค์ประกอบในตำแหน่งที่เหมาะสมตามข้อกำหนดเป็นส่วนสำคัญของการออกแบบเว็บที่ดี

นั่นคือที่มาของคุณสมบัติตำแหน่ง CSS คุณสมบัติตำแหน่งมีค่าห้าค่าที่คุณสามารถใช้เพื่อกำหนดว่าองค์ประกอบควรวางตำแหน่งบนหน้าเว็บอย่างไร

บทช่วยสอนนี้จะอธิบายพร้อมตัวอย่าง วิธีใช้คุณสมบัติตำแหน่งเพื่อวางตำแหน่งองค์ประกอบบนหน้าเว็บ หลังจากอ่านบทช่วยสอนนี้ คุณจะเป็นผู้เชี่ยวชาญในการใช้คุณสมบัติตำแหน่งเพื่อวางตำแหน่งองค์ประกอบบนหน้าเว็บใน CSS

ตำแหน่ง CSS

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

position: positionType;

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

มีห้าค่าที่คุณสามารถใช้เพื่อกำหนดตำแหน่งขององค์ประกอบบนหน้าเว็บ:

คงที่
แก้ไขแล้ว
ญาติ
เหนียว
แน่นอน

เมื่อใช้ค่าใดค่าหนึ่งจากห้าค่าข้างต้น คุณจะระบุได้ว่าควรวางตำแหน่งองค์ประกอบอย่างไร คุณสามารถใช้คุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวาเพื่อกำหนดตำแหน่งขององค์ประกอบบนหน้าเพิ่มเติม เราจะพูดถึงวิธีการทำงานในตัวอย่างของเราสำหรับบทความนี้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ค่าตำแหน่ง CSS

เราสามารถเริ่มสำรวจวิธีการใช้ค่าที่เป็นไปได้แต่ละค่าของคุณสมบัติตำแหน่ง มาดูตัวอย่างค่าแต่ละค่าที่คุณใช้กับคุณสมบัติตำแหน่งกันเถอะ

ตำแหน่งคงที่

องค์ประกอบ HTML อยู่ในตำแหน่งคงที่โดยค่าเริ่มต้น ซึ่งหมายความว่าองค์ประกอบจะไม่ได้รับผลกระทบจากคุณสมบัติ CSS บน ล่าง ซ้าย และขวา เบราว์เซอร์จะแสดงองค์ประกอบในตำแหน่งคงที่โดยอัตโนมัติ เว้นแต่รหัสจะระบุไว้เป็นอย่างอื่น

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

<html>

<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	position: static;
	border: 2px solid lightblue;
}

คำแนะนำทีละขั้นตอนเกี่ยวกับตำแหน่ง CSS ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

เราได้สร้างกล่องที่วางตำแหน่งคงที่บนหน้า กล่าวอีกนัยหนึ่ง กล่องไม่ได้ถูกจัดวางในลักษณะเฉพาะใดๆ ค่อนข้าง ตำแหน่งจะขึ้นอยู่กับค่าเริ่มต้นของเบราว์เซอร์ กล่องของเรามีเส้นขอบสีน้ำเงินอ่อนทึบกว้าง 2px เส้นขอบนี้ทำให้มองเห็นกล่องได้ชัดเจนขึ้น

ตำแหน่งคงที่

ค่าคงที่จะวางตำแหน่งองค์ประกอบในที่ใดที่หนึ่งบนหน้าเว็บ

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

เราต้องการสร้างกล่องและแก้ไขที่มุมล่างขวาของหน้าเว็บ เราสามารถทำได้โดยใช้รหัสต่อไปนี้:

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
	width: 200px;
	border: 2px solid lightblue;
	position: fixed;
	bottom: 0;
	right: 0;
}

ในตัวอย่างนี้ เราใช้ค่าตำแหน่งคงที่เพื่อสร้างกล่องที่ถูกกำหนดให้เป็นตำแหน่งเฉพาะบนหน้าเว็บ ด้านล่าง:0 และขวา:0 คุณสมบัติวางช่องที่มุมล่างขวามือของหน้าเว็บ

เราระบุว่าความกว้างของกล่องของเราควรเป็น 200px กล่องของเราควรมีเส้นขอบสีน้ำเงินอ่อนทึบขนาด 2px สไตล์เหล่านี้ทำให้กล่องของเรามองเห็นได้ง่าย

ดังที่คุณเห็นในภาพด้านบน กล่องของเราอยู่ที่มุมล่างขวาของหน้าเว็บ เมื่อผู้ใช้เลื่อนลง กล่องจะคงตำแหน่งไว้บนหน้าจอ ซึ่งหมายความว่าผู้ใช้จะยังคงเห็นช่องที่ด้านล่างขวาของหน้าจอ แม้ว่าพวกเขาจะเลื่อนก็ตาม

ตำแหน่งสัมพัทธ์

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

ค่าสัมพัทธ์ถูกใช้นอกเหนือจากคุณสมบัติด้านบน ด้านล่าง ด้านซ้าย หรือด้านขวา คุณสมบัติทั้งสี่นั้นระบุว่าองค์ประกอบจะถูกชดเชยจากตำแหน่งเริ่มต้นอย่างไร พื้นที่ที่สร้างโดยกล่องที่มีตำแหน่งค่อนข้างจะไม่ถูกเติมด้วยองค์ประกอบอื่น

ตัวอย่างเช่น หากคุณต้องการวางตำแหน่งองค์ประกอบที่สัมพันธ์กับเส้นขอบด้านซ้ายขนาด 50px คุณจะต้องระบุค่าสำหรับคุณสมบัติด้านซ้าย นี่คือรหัสที่เราจะใช้สร้างกล่องดังกล่าว:

<html>

<p>This is the contents of a web page.</p>
<div class="outer">
	<p>This is a positioned box.</p>
</div>

<style>

.outer {
position: relative;
left: 50px;
	border: 2px solid lightblue;
}

ในตัวอย่างนี้ เรากำหนดกล่องที่มีตำแหน่งสัมพัทธ์ เราใช้คุณสมบัติ left เพื่อชดเชยกล่องของเราไปทางซ้าย 50px อย่างที่คุณเห็น มีช่องว่าง 50px ระหว่างจุดเริ่มต้นของเพจกับจุดเริ่มต้นของกล่องของเรา เราสร้างสิ่งนี้โดยใช้ตำแหน่ง:สัมพันธ์และซ้าย:คุณสมบัติ 50px

พื้นที่ที่สร้างขึ้นทางด้านซ้ายของกล่องของเราจะไม่ถูกเติมด้วยองค์ประกอบอื่นใด

ตำแหน่งติดหนึบ

ค่าตำแหน่งติดหนึบจะวางตำแหน่งองค์ประกอบให้สัมพันธ์กันจนกว่าผู้เข้าชมจะข้ามเกณฑ์ จากนั้นองค์ประกอบจะมีตำแหน่งคงที่

ตำแหน่งที่เหนียวแน่นนั้นเป็นส่วนผสมของตำแหน่งสัมพัทธ์และตำแหน่งคงที่ เมื่อโหลดองค์ประกอบเหนียว มันจะอยู่ในตำแหน่งที่ค่อนข้าง องค์ประกอบยังคงถูกผูกไว้กับตำแหน่งคงที่หลังจากที่ผู้ใช้เลื่อนลงมาผ่านจุดใดจุดหนึ่งในหน้า

การใช้ตำแหน่งติดหนึบจะมีประโยชน์ถ้าคุณต้องการรักษาโฟลว์ของเอกสาร คุณสามารถทำให้องค์ประกอบยึดติดกับตำแหน่งเฉพาะเพื่อให้ผู้เข้าชมไม่มองข้ามองค์ประกอบนั้น

โดยทั่วไปแล้ว ตำแหน่งที่ติดหนึบจะใช้กับแถบนำทางที่ติดอยู่ที่ด้านบนของหน้าจอเมื่อผู้ใช้เลื่อนหน้าลง

เราต้องการให้กล่องปรากฏที่ด้านบนสุดของหน้าของเรา กล่องนี้ควรปรากฏขึ้นหลังข้อความ แล้วติดกับด้านบนเมื่อผู้ใช้เลื่อนลงมาที่รูปภาพ เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<html>

<p>Lorem ipsum dolor sit amet, … </p>
<div>
	<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>

<style>

.inner {
	position: sticky;
	top: 0;
	border: 2px solid lightblue;
}

ในภาพนี้ คุณจะเห็นว่ากล่องปรากฏขึ้นหลังข้อความย่อหน้าแรกของเรา เนื่องจากผู้ใช้ยังไม่ได้เลื่อนลงมาและพบกับช่องดังกล่าว นี่คือสิ่งที่เกิดขึ้นเมื่อผู้ใช้ของเราเลื่อนลงผ่านช่อง:

ที่ด้านบนของหน้า เรามี Lorem ipsum … ข้อความมาตรฐาน แก้ไขกล่องที่มีข้อความ This is a positioned box ใต้ย่อหน้านี้ นอกจากนี้ เมื่อผู้ใช้เลื่อนลงไปที่กล่องตำแหน่งที่เราประกาศ กล่องนั้นจะถูกผูกไว้กับด้านบนของหน้าจอ ขณะที่ผู้ใช้เลื่อนไปเรื่อย ๆ กล่องจะอยู่ที่ด้านบนของหน้าจอ

กล่องจะกลับสู่ตำแหน่งเริ่มต้นระหว่างสองย่อหน้าของข้อความ สิ่งนี้จะเกิดขึ้นเมื่อผู้ใช้เลื่อนเหนือช่องเท่านั้น

ตำแหน่งสัมบูรณ์

ค่าสัมบูรณ์จะกำหนดตำแหน่งองค์ประกอบที่สัมพันธ์กับองค์ประกอบอื่นที่มีตำแหน่งอยู่แล้ว

คุณสมบัติที่แน่นอนจะวางตำแหน่งองค์ประกอบที่สัมพันธ์กับองค์ประกอบอื่นที่มีตำแหน่งอยู่แล้ว ตัวอย่างเช่น องค์ประกอบในตำแหน่งที่แน่นอนอาจเป็นข้อความภายในกล่องที่มีข้อความย่อหน้าหนึ่ง ช่องนี้อาจมีตำแหน่งสัมพัทธ์หรือตำแหน่งคงที่

เรากำลังออกแบบกล่องที่เราต้องการให้ปรากฏที่มุมล่างซ้ายมือของอีกกล่องหนึ่ง เราสามารถสร้างกล่องเหล่านี้ได้โดยใช้รหัสต่อไปนี้:

<html>

<div class="outer">
	<p>This is the outer box.</p>
	<p class="inner">This is a positioned box.</p>
</div>

<style>

.outer {
	position: relative;
	border: 2px solid lightblue;
	width: 300px;
	height: 300px;
}

.inner {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 2px solid pink;
}

ในไฟล์ HTML เรากำหนดสองช่อง เราประกาศกล่องแรกโดยใช้แท็ก

และกำหนดคลาส outer . ซึ่งหมายความว่ากล่องจะมีรูปแบบ CSS ที่เชื่อมโยงกับ ด้านนอก ระดับ. เราประกาศกล่องที่สองโดยใช้แท็ก

และกำหนดคลาส inner .

ในไฟล์ CSS เราระบุว่ากล่องด้านนอกของเราควร:

จัดตำแหน่งให้สัมพันธ์กับองค์ประกอบอื่นๆ บนหน้าเว็บ
มีเส้นขอบสีน้ำเงินอ่อนทึบกว้าง 2px
กว้าง 300px สูง 300px

เราระบุว่ากล่องภายในของเราควร:

อยู่ในตำแหน่งที่แน่นอน
อยู่ในตำแหน่งที่ด้านล่างซ้ายของกล่องด้านนอกของเรา (โดยใช้ด้านซ้าย:0, ด้านล่าง:0)
มีเส้นขอบสีชมพูทึบกว้าง 2px

ในตัวอย่างนี้ เราวางตำแหน่งกล่องสีชมพู (inner ) ที่ด้านล่างซ้ายของ outer กล่อง. หากเราใช้คีย์เวิร์ดคงที่ ในทางกลับกัน กล่องสีชมพูจะอยู่ที่ด้านล่างสุดของหน้าเว็บของเรา

บทสรุป

คุณสมบัติตำแหน่ง CSS กำหนดตำแหน่งขององค์ประกอบบนหน้าเว็บ คุณสมบัติด้านบน ขวา ล่าง และซ้ายวางองค์ประกอบในตำแหน่งเฉพาะบนหน้าเว็บ ตอนนี้คุณพร้อมที่จะเริ่มวางตำแหน่งองค์ประกอบใน CSS โดยใช้คุณสมบัติตำแหน่งอย่างมืออาชีพแล้ว!