เค้าโครง CSS - คุณสมบัติตำแหน่ง

สารบัญ

    แสดงสารบัญ

position คุณสมบัติระบุประเภทของ วิธีการกำหนดตำแหน่งที่ใช้สำหรับองค์ประกอบ (คงที่, สัมพันธ์, คงที่, สัมบูรณ์หรือ เหนียว).

ตำแหน่งทรัพย์สิน

position คุณสมบัติระบุประเภทของวิธีการวางตำแหน่งที่ใช้สำหรับองค์ประกอบ

มีค่าตำแหน่งที่แตกต่างกันห้าค่า:

static
relative
fixed
absolute
sticky

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

คุณสมบัติ CSS position: static;

องค์ประกอบ HTML จะถูกวางตำแหน่งคงที่ตามค่าเริ่มต้น

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

องค์ประกอบที่มี position: static; ไม่ได้อยู่ในตำแหน่งพิเศษใดๆ มันคือ อยู่ในตำแหน่งตามโฟลว์ปกติของเพจเสมอ:

This <div> element has position: static;

นี่คือ CSS ที่ใช้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

คุณสมบัติ CSS ตำแหน่ง: สัมพันธ์;

องค์ประกอบที่มี ตำแหน่ง: สัมพันธ์; อยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ

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

This <div> element has position: relative;

นี่คือ CSS ที่ใช้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

คุณสมบัติ CSS position: fixed;

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

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

สังเกตองค์ประกอบคงที่ที่มุมขวาล่างของหน้า นี่คือ CSS ที่ใช้:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>
This <div> element has position: fixed;

คุณสมบัติ CSS ตำแหน่ง: สัมบูรณ์;

องค์ประกอบที่มี ตำแหน่ง: สัมบูรณ์; อยู่ในตำแหน่งที่สัมพันธ์กับบรรพบุรุษในตำแหน่งที่ใกล้ที่สุด (แทนที่จะวางตำแหน่งสัมพันธ์กับวิวพอร์ต เหมือนคงที่)

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

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

นี่เป็นตัวอย่างง่ายๆ:

This <div> element has position: relative;
This <div> element has 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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

คุณสมบัติ CSS position: Sticky;

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

องค์ประกอบเหนียวสลับระหว่าง ญาติ และ คงที่ ขึ้นอยู่กับตำแหน่งการเลื่อน มันอยู่ในตำแหน่งที่สัมพันธ์กันจนกระทั่งถึงตำแหน่งออฟเซ็ตที่กำหนดในวิวพอร์ต จากนั้นมันจะ "เกาะติด" อยู่กับที่ (เช่น ตำแหน่ง:คงที่)

หมายเหตุ: Internet Explorer ไม่สนับสนุนการวางตำแหน่งแบบติดหนึบ Safari ต้องใช้ -webkit- คำนำหน้า (ดูตัวอย่างด้านล่าง) คุณต้องระบุอย่างน้อยหนึ่ง top, right, ด้านล่าง หรือ ซ้าย สำหรับ ตำแหน่งเหนียวในการทำงาน

ในตัวอย่างนี้ องค์ประกอบแบบติดหนึบจะติดอยู่ที่ด้านบนของหน้า (top: 0) เมื่อคุณไปถึงตำแหน่งการเลื่อน

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

การจัดตำแหน่งข้อความในรูปภาพ

วิธีวางตำแหน่งข้อความบนรูปภาพ:

ตัวอย่าง

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

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

บนซ้าย →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

ขวาบน →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

ล่างซ้าย →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

ล่างขวา →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

อยู่ตรงกลาง →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

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

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

กำหนดรูปร่างขององค์ประกอบ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

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

bottom

ตั้งค่าขอบระยะขอบด้านล่างสำหรับกล่องที่อยู่ในตำแหน่ง

clip

คลิปองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน

left

ตั้งค่าขอบระยะขอบด้านซ้ายสำหรับกล่องที่อยู่ในตำแหน่ง

position

ระบุประเภทของการวางตำแหน่งสำหรับองค์ประกอบ

right

ตั้งค่าขอบระยะขอบด้านขวาสำหรับกล่องที่อยู่ในตำแหน่ง

top

ตั้งค่าขอบระยะขอบด้านบนสำหรับกล่องที่อยู่ในตำแหน่ง