CSS Position ตำแหน่ง

CSS Layout — The position Property

[position: ……..;] เราสามารถระบุชนิดของ method ตำแหน่ง ให้กับ element เช่น (static, relative, fixed, absolute or sticky)

The position Property

คุณสมบัติของ position การระบุชนิดของ method ตำแหน่ง ให้กับ element มี position ที่ต่างกันดังนี้ มาดูกัน

- static
- relative
- fixed
- absolute
- sticky

element จะถูกจัดตำแหน่งโดยใช้ด้านบน ด้านล่าง ซ้าย และ ขวา .อย่างไรก็ตามจะยังไม่ทำงานเว้นแต่จะมีการกำหนดตำแหน่ง ทำงานก็ยังแตกต่างกันขึ้นอยู่กับค่าตำแหน่ง . <<<<<< มาดู POSITION ตัวแรกกัน>>>>>>>>>>

position: static; ค่าเริ่มต้น

element HTML อยู่ในตำแหน่งค่าเริ่มต้น จะไม่ได้รับผลกระทบจาก ด้านบน, ด้านล่าง, ด้านซ้ายและด้านขวา

CSS

div.static {
   position: static;
   border: 3px solid rgb(8, 8, 8);
}

HTML

<div class="container">   
   <h2>CSS Layout - The position Property</h2>
   <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>
</div>

Example

position: static; ค่าเริ่มต้น //ผลที่ได้เป็นค่าเริ่มต้น ไม่เปลี่ยนแปลง

position: relative;

element ของ [position: relative;] element ที่มีตำแหน่งเกี่ยวกับตำแหน่งปกติ . การตั้งค่า ด้านบน ขวา ซ้าย และล่าง ของ element จะทำให้มันถูกปรับจากตำแหน่งปกติ แต่เนื้อหาอื่นจะยังเหมือนเดิม

CSS

div.relative {
   position: relative;    //ตำแหน่ง
   left: 50px;     //ผลักจากด้านซ้ายไปด้านขว
   border: 3px solid rgb(8, 8, 8);    //ขนาดเส้น รูปแบบ สีของเส้น
}

HTML

<div class="container"> 
   <h2>CSS Layout - The position Property</h2>
   <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>
</div>

Example

position: relative;

position: fixed; คงที่

element ของ [position: fixed;] คือตำแหน่งที่มีความเกี่ยวข้องกับ Viewport คือจะอยู่ในตำแหน่งเดิมเสมอ แม้ว่าหน้าจะเลื่อน คุณสมบัติเพื่อใช้จัดตำแหน่งของ element ด้านบน ขวา ล่าง และซ้าย

CSS

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

HTML

<div class="container p-3">
   <h2>CSS Layout - The position Property </h2>
   <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>
</div>

Example

position: fixed;

position: absolute; แน่นอน

element ของ [position: absolute;] คือ ตำแหน่งที่เกี่ยวข้องกับบรรพบุรุษ ที่อยู่ใกล้ที่สุด (แทนตำแหน่งที่เกี่ยวข้องกับ Viewport เช่น Fixed) ถ้า element ของ ตำแหน่งแน่นอน ไม่มีบรรพบุรุษ จะใช้เนื้อหาและย้ายไปพร้อมกับการเลื่อนหน้า

CSS

div.relative {
   position: relative;
   width: 400px;
   height: 200px;
   border: 3px solid rgb(0, 0, 0);
}
div.absolute {
   position: absolute;
   top: 80px;
   right: 0;
   width: 200px;
   height: 100px;
   border: 3px solid rgb(234, 250, 8);
}

HTML

<div class="container p-3">
   <h2>CSS Layout - The position Property </h2>
   <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>
</div>

Example

position: absolute;

position: sticky; หนึบ

element ของ [position: sticky;] คือ ตำแหน่ง ที่ยึดเป็นหลัก บนการเลื่อนตำแหน่งของผู้ใช้

element Sticky สลับระหว่าง relative และ fixed ขึ้นอยู่กับตำแหน่งการเลื่อน อยู่ในตำแหน่งที่เกี่ยวข้องกัน จนกว่าจะได้ตำแหน่งที่กำหนดใน Viewport จากนั้นจะ “ยึด” อยู่ในตำแหน่ง (เช่น ตำแหน่ง : คงที่)

CSS

div.sticky {
  position: -webkit-sticky;
  position: sticky;   //ให้ติดข้างไว้
  top: 0;   //เพื่อให้คงอยู่ (ติดหนึบ)ไม่เลื่อนตาม
  padding: 5px;   //ความกว้างของกรอบ
  background-color: #cae8ca;   //สีพื้นหลัง
  border: 2px solid #4CAF50;   //ขนาดเส้น รูปแบบ สีของเส้นขอบ
}

HTML

<div class="container">
   <h2>CSS Layout - The position Property </h2>
   <p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
   <p>Note: IE/Edge 15 and earlier versions do not support sticky position.</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>
</div>

Example

position: sticky;

Overlapping Elements

การซ้อน elements เมื่อ element ถูกวางตำแหน่ง จึงสามารถซ้อนทับ element อื่นได้

คุณสมบัติ [z-index: ………;] ระบุลำดับ Stack ของ element (element ที่ควรวางไว้ด้านหน้า หรือด้านหลัง อื่นๆ ) และ element สามารถมีลำดับ Stack ได้ทั้งบวกหรือลบ

CSS

img {
   position: absolute;  //ตำแหน่ง ที่แน่นอน
   left: 20%;   //ความห่างจากด้านซ้าย
   top: 100px;  //ความห่างจากด้านบน
   z-index: 1;  ถ้าค่าเป็นบวก ภาพจะอยู่ด้านบน และถ้าค่าเป็นลบ จะอยู่ด้านล่าง
}

HTML

<div class="container p-3">
   <h2>CSS Layout - The position Property </h2>
   <div>
      <h1>This is a heading</h1>
      <img src="./assets/EasyJung5.png">
      <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
   </div>
</div>

Example

z-index: 1; ถ้าค่าเป็นบวก ภาพจะอยู่ด้านบน และถ้าค่าเป็นลบ จะอยู่ด้านล่าง

Positioning Text In an Image

ตำแหน่งของตัวอักษร ในรูปภาพ ใช้งานร่วมกับ element Relation และ Absolute ปรับความเบลอและความชัดของภาพ

CSS

.container {   //class container
  position: relative;  //ตำแหน่ง ที่เกี่ยวข้องกัน ปรับไปตามที่กำหนด
}
.topleft {    //class topleft (บนขวา ต้องกำหนด ด้านบน และ ด้านซ้าย คู่กัน)
  position: absolute;   //ตำแหน่ง แน่นอน
  top: 8px;     //ความห่างจากด้านบน  
  left: 16px;   //ความห่างจากด้านซ้าย
  font-size: 18px;   //ขนาดของตัวอักษร
}
img {   //class img
  width: 100%;    //ความกว้างของรูปภาพ
  height: auto;   // ความสูงของรูปภาพ
  opacity: 0.3;   //ความชัด ความเบลอของรูปภาพ
}

HTML

<div class="container p-3">
   <h2>CSS Layout - The position Property </h2>
   <h2>Image Text</h2>
   <p>Add some text to an image in the top left corner:</p>
   <div class="container">
      <img src="https://chillwithadi.com/wp-content/uploads/2018/12/%E0%B8%88%E0%B8%B1%E0%B8%A1%E0%B8%97%E0%B8%A3%E0%B8%B2-27-1170x550.jpg">
     <div class="topleft">Top Left</div>
   </div>
</div>

Example

ภาพจาก :: https://chillwithadi.com/wp-content/uploads/2018/12/%E0%B8%88%E0%B8%B1%E0%B8%A1%E0%B8%97%E0%B8%A3%E0%B8%B2-27-1170x550.jpg

เรื่องของการจัดตำแหน่งก็จะประมาณนี้ไป อยากให้เป็นแบบไหนลองใช้กันดู อาทิ static , relative , fixed , absolute , sticky , Overlapping [z-index] , position image บ๊ะบายยยย . เจอกันเรื่อง CSS Overflow เริ่มยากขึ้นเรื่อยๆล่ะ ก็จะเริ่มอึนๆ หน่อยๆ