Basic Layout with CSS
26 Dec 2011
Positioning Properties
ในหัวข้อนี้เราจะมาดูพร็อพเพอร์ตี้ที่เกี่ยวข้องกับการจัดตำแหน่งของ Elements ต่างๆ อันได้แก่พร็อพเพอร์ตี้ float, clear, และ position เมื่อจบหัวข้อนี้แล้วเราจะนำเอาความรู้ทั้งหมดมาประยุกต์เป็นเลย์เอาท์ต่างๆให้หัวข้อถัดไป
Floatโดยปกติแล้ว Elements ต่างๆจะถูกจัดเรียงแบบ Natural Flow ตามการเขียนโค้ด HTML กล่าวคือเป็นการเรียงจากซ้ายไปขวาและจากบนลงล่างไล่ไปตามแท็ก HTML ต่างๆที่ได้เขียนไว้ หากจะให้ Element ใด Element หนึ่งปรากฏขึ้นในตำแหน่งที่ต้องการ ก็จะต้องมีการบิดเบือน Flow (คือบังคับไม่ให้เป็นไปตามธรรมชาติของมัน) เอาหล่ะเรามาเริ่มด้วยโค้ด HTML ที่จะใช้เป็นตัวอย่างในหัวข้อนี้ก่อนดังนี้
<body>
<h1>Interesting Linux Distros</h1>
<h3>Arch Linux</h3>
<div class="logo">
<img src="../../Pics/Ch02/ArchLinux_Logo.png" />
</div>
<p>
Arch linux is lightweight and simple linux distribution. When you install Arch, you install only the minimum core components. No X, no drivers, no programs, just the minimum required components to boot the system. Everything else will be installed later after the first boot. And Arch lets you control what you want to install and configure the way you are. Cool right ?! Also, Arch is a rolling distribution. Meaning that you will never require to download a new release, just execute the update command. Your system will be uptodate.
</p>
</body>
- หัวข้อใหญ่ (<h1>. . .</h1>)
- รูปภาพ (<div class="logo">. . .</div>)
- หัวข้อรอง (<h3>. . .</h3>)
- และข้อความ (<p>. . .</p>)
เนื่องจากเรายังมิได้มีการจัดตำแหน่งให้กับส่วนต่างๆ ดังนั้นจึงเห็นส่วนต่างๆเรียงกันลงมาตามลำดับจากบนลงล่างดังแสดงในรูปที่ 7 ในการเตรียมตัวอย่างคุณอาจจะหารูปอะไรก็ได้โดยมีขนาดประมาณ 180x60 พิกเซลนะครับ และข้อความก็ควรมีความยาวประมาณ 4-5 บรรทัดขึ้นไป
ทีนี้ถ้าเราอยากให้รูปแสดงอยู่ทางซ้ายมือ ส่วนหัวข้อรอง (แท็ก <h3>) และข้อความ (แท็ก <p>) แสดงทางขวามือประกอบไปกับรูปภาพ เราจะต้องสั่ง Float รูปภาพด้วยพร็อพเพอร์ตี้ float การ Float คือการสั่งให้ Element ลอยขึ้นมาจาก Flow เดิมหรือพูดง่ายๆคือลอยขึ้นมาและไม่เป็นส่วนหนึ่งของ Natural Flow และเราสามารถสั่งให้ Float ไปทางซ้ายหรือขวาก็ได้โดย ดังนั้นในตัวอย่างข้างต้นเราจึงกำหนดสไตล์ให้ดังต่อไปนี้
CSS:
body {
border: 1px solid #0000FF;
}
.logo {
float: left;
border: 1px solid #000000;
}
ซึ่งเราก็จะได้ผลลัพธ์ดังแสดงในรูปที่ 8 รูปภาพถูกสั่งให้ลอยขึ้นมาจาก Flow เดิมและลอยไปทางซ้ายมือ ดังนั้นหัวข้อรอง (แท็ก <h3>) และข้อความ (แท็ก <p>) จึงถูกแสดงถัดจากหัวข้อใหญ่ (แท็ก <h1>) โดยทันที เหมือนไม่มีรูปภาพอยู่ใน Flow การ Float นั้นไม่เหมือนกับการทำเลย์เยอร์ กล่าวคือจะไม่มีการแสดงผลของ Elements ทับซ้อนกัน ดังนั้นหัวข้อรอง (แท็ก <h3>) และข้อความ (แท็ก <p>) จึงไม่ปรากฏอยู่ใต้รูปภาพ แต่จะถูกแสดงล้อมรอบรูปภาพไปโดยปริยาย โปรดสังเกตว่าผมใส่กรอบให้กับ body และรูปภาพด้วยเพื่อให้เห็นขอบเขตที่ชัดเจน
Clear
จากตัวอย่างที่ผ่านมาเราจะเห็นได้ว่าทั้งหัวข้อรอง (แท็ก <h3>) และข้อความ (แท็ก <p>) แสดงอยู่ทางขวามือของรูปภาพ เพราะเราบิดเบือน Flow เดิมเฉพาะในส่วนของรูปภาพเท่านั้น หัวข้อรอง (แท็ก <h3>) และข้อความ (แท็ก <p>) ยังคงแสดงเป็นลำดับไล่เรียงกันลงมา ทว่าหากเราต้องการบังคับให้ข้อความ (แท็ก <p>) แสดงอยู่ภายใต้รูปภาพ เราจะต้องสั่งด้วยพร็อพเพอร์ตี้ clear
พร็อพเพอร์ตี้ clear ใช้สำหรับเคลียร์การแสดงผล Element ต่างๆก่อนหน้า ซึ่งสามารถเคลียร์ได้ 3 รูปแบบคือ left, right, และ both คุณคงจะไม่เห็นภาพหากไม่ได้ดูตัวอย่างเสียก่อน งั้นเรามาดัดแปลง CSS กันดังนี้
CSS:
body {
border: 1px solid #0000FF;
}
.logo {
float: left;
border: 1px solid #000000;
}
p {
clear: left;
}
เรากำหนดให้ข้อความ (แท็ก <p>) เคลียร์การแสดงผลทางซ้ายมือ หรือห้ามมีการแสดงผลของ Element ใดๆทางซ้ายมือ หากมีเบราว์เซอร์ก็จะแสดงผลข้อความ (แท็ก <p>) โดยขึ้นบรรทัดใหม่ดังแสดงในรูปที่ 9 (เรากำหนด clear ให้กับแท็ก <p> ก็ต้องขึ้นบรรทัดใหม่ที่แท็ก <p> นะครับ) ตัวอย่างนี้เนื่องจากมีรูปภาพอยู่ทางซ้ายมือในระนาบเดียวกันกับข้อความ (แท็ก <p>) ดังนั้นหากเรากำหนดค่าพร็อพเพอร์ตี้ clear ให้เป็น right ก็จะไม่มีผลใดๆทั้งสิ้น ส่วนการเคลียร์ both ก็คือการเคลียร์ทั้งสองด้านซ้ายและขวา พร็อพเพอร์ตี้ float และ clear จำเป็นมากต่อการจัดเลย์เอาท์นะครับ หากประยุกต์ใช้ดีๆก็สามารถทำเลย์เอาท์ที่สวยงามได้ ลองจิตนาการดูว่ารูปภาพคือ Navigation หัวข้อรองคือ Content และข้อความคือ Footer แค่นี้คุณก็ได้เลย์เอาท์แบบง่ายๆแล้ว แต่อดใจรออีกสักนิดนึง เราจะเอาความรู้ทั้งหมดไปประยุกต์รวมกันในตอนท้าย
Position
ในหัวข้อที่ผ่านมาเราสามารถประยุกต์ใช้พร็อพเพอร์ตี้ float และ clear กับการจัดเลย์เอาท์ได้ เช่นทำคอลัมน์ซ้ายมือคอลัมน์ขวามือ แต่หากเราต้องการกำหนดตำแหน่งที่แน่นอนกว่านั้น เราต้องใช้การกำหนด Position เราสามารถกำหนด Position หรือตำแหน่งให้กับ Elements ต่างๆแทนที่จะให้มันเป็นไปตาม Flow เดิมของมัน การกำหนด Position เราสามารถใช้พร็อพเพอร์ตี้ top, right, bottom, และ left เพื่อกำหนดตำแหน่งของ Elements ได้ แต่เราจะต้องระบุวิธีการอ้างอิงตำแหน่งเสียก่อน เช่นถ้ากำหนด Position แบบ Fixed หรือตายตัว Element ก็จะถูก Fixed ตามตำแหน่ง Top, Right, Bottom, Left ที่ได้กำหนด ซึ่งวิธีการอ้างอิงตำแหน่งมีอยู่ 4 แบบด้วยกันคือ
- Fixed: คือการกำหนดตำแหน่งแบบตายตัว อ้างอิงจากขอบส่วนการแสดงผลของเบราว์เซอร์ ไม่ว่าเราจะเลื่อนเว็บเพจขึ้นลงอย่างไร Element นั้นก็จะ Fixed อยู่ที่ตำแหน่งเดิม เช่นนับส่วน Top จากขอบเบราว์เซอร์ไป 10 พิกเซล ส่วนอื่นขยับอย่างไร Element นั้นก็จะ Fixed ส่วน Top ห่างจากขอบเบราว์เซอร์ไป 10 พิกเซลเท่าเดิม
- Relative: คือการกำหนดตำแหน่งแบบอ้างอิงจาก Flow เดิมของมัน เช่นนับส่วน Top จาก Flow เดิมไป 10 พิกเซล ถ้า Flow เดิมของมันต้องต่อจากแท็ก <h1> ก็ให้ส่วน Top ห่างจากแท็ก <h1> ไปอีก 10 พิกเซล แท็ก <h1> ขยับ Element ก็ขยับ 10 พิกเซลตามไปด้วย
- Absolute: คือการกำหนดตำแหน่งที่แน่นอนของการแสดงผลภายในเว็บเพจ เช่นให้แสดงผลห่างจาก Top เพจลงมา 30 พิกเซล ก็จะห่างจาก Top เพจไป 30 พิกเซลตลอด เวลาเว็บเพจถูกเลื่อนตำแหน่ง Top เพจก็เลื่อน Element ก็เลื่อนตามไป 30 พิกเซลเช่นกัน และ Elements นั้นๆก็จะถูกนำออกจาก Natural Flow ด้วย
- Static: คือการกำหนดตำแหน่งแบบ Natural Flow นั่นคือเราไม่สามารถบิดเบือน Flow ใดๆได้เลย นั่นคือรูปแบบทั้งหมดของการอ้างอิงตำแหน่ง ทีนี้เรามาดูตัวอย่างกัน
Fixed
คือการกำหนดตำแหน่งแบบตายตัว อ้างอิงจากขอบส่วนการแสดงผลของเบราว์เซอร์ ไม่ว่าเราจะเลื่อนเว็บเพจขึ้นลงอย่างไร Element นั้นก็จะ Fixed อยู่ที่ตำแหน่งเดิม การทำ Position แบบ Fixed เริ่มต้นด้วยการกำหนดพร็อพเพอร์ตี้ position ให้กับ Element ที่ต้องการ Fixed ตำแหน่งดังนี้
position: fixed;
จากนั้นจึงกำหนดตำแหน่ง Top, Right, Bottom, และ Left ด้วยพร็อพเพอร์ตี้ชื่อตรงตามตัวเลย โดยวัดจากเส้นขอบการแสดงผลของเบราว์เซอร์ มาดูตัวอย่างกัน เราจะใช้ตัวอย่าง HTML ในหัวข้อที่ผ่านมา โดยจะกำหนดให้รูปภาพ (แท็ก <div class="logo">) มีการแสดงผลด้วยตำแหน่งที่ Fixed ไว้ ไม่ว่าเราจะเลื่อนเว็บเพจขึ้นลงอย่างไรรูปภาพก็จะอยู่ที่ตำแหน่งเดิมเสมอดังนี้
CSS:
body {
border: 1px solid #00F;
}
.logo {
border: 1px solid #000;
position: fixed;
right: 10px;
top: 10px;
}
รูปที่ 10 แสดงผลลัพธ์ของตัวอย่างข้างต้น จะสังเกตได้ว่าแม้ว่าเราจะเลื่อนสกอลบาร์ลงมาแต่รูปภาพก็ยังคงอยู่ที่ตำแหน่งเดิม ตัวอย่างนี้ถ้าข้อความยาวไม่พอก็ให้หดขนาดของเบราว์เซอร์ลงเพื่อให้เห็นผลลัพธ์นะครับ และโปรดสังเกตว่ารูปสามารถซ้อนทับข้อความได้ด้วยซึ่งต่างกับการจัดตำแหน่งด้วย Float เราสามารถประยุกต์ใช้ Fixed กับเมนูหรือคอนโทรลต่างๆที่เราต้องการให้อยู่ในโฟกัสตลอดเวลาได้เป็นต้น
Relative
คือการกำหนดตำแหน่งแบบอ้างอิงจาก Flow เดิมของมัน Flow เดิมนั้นอยู่ที่ไหนก็ให้นับส่วน Top, Right, Bottom, และ Left ต่อจากนั้นไป ตัวอย่างเช่น
CSS:
body {
border: 1px solid #00F;
}
img {
border: 1px solid #000;
position: relative;
left: 200px;
}
ตัวอย่างข้างต้นรูปภาพจะเรียงตาม Flow เดิมของมัน แต่เรากำหนดให้ด้านซ้ายมือขยับออกมาอีก 200 พิกเซล (Relative to Natural Flow) รูปที่ 11 แสดงผลลัพธ์ที่ได้ โปรดสังเกตว่าเมื่อมีการเลื่อนเว็บเพจขึ้นลงรูปภาพก็เลื่อนตามไปด้วยนะครับ (ย้ำ Relative) และโปรดสังเกตว่าผมกำหนดสไตล์ให้กับ img แทนที่จะเป็น .logo เหมือนตัวอย่างอื่นที่ผ่านๆมา เพราะในตัวอย่างนี้แท็กจะขยายขนาดจนเต็มพื้นที่ เนื่องจากไม่มี Element ใดๆในระนาบเดียวกัน
Absolute
คือการกำหนดตำแหน่งที่แน่นอนของการแสดงผลภายในเว็บเพจ เช่นให้แสดงผลห่างจาก Top เพจลงมา 30 พิกเซล ก็จะห่างจาก Top เพจไป 30 พิกเซลตลอด เวลาเพจถูกเลื่อนตำแหน่ง Top เพจก็เลื่อน Element ก็เลื่อนตามไป 30 พิกเซลเช่นกัน และ Elements นั้นๆก็จะถูกนำออกจาก Natural Flow ด้วย มาดูตัวอย่างกัน
CSS:
body {
border: 1px solid #00F;
}
.logo {
border: 1px solid #000;
position: absolute;
top: 30px;
right: 50px;
}
ตัวอย่างข้างต้นจะได้ผลลัพธ์ดังแสดงในรูปที่ 12 เนื่องเราจัดตำแหน่งรูปภาพแบบ Absolute ดังนั้นรูปภาพจึงไม่เป็นส่วนหนึ่งของ Flow แล้ว ส่วนอื่นๆจึงถูกเลื่อนขึ้นมา และเรากำหนดให้ส่วน Top และ Right เป็น 30 และ 50 พิกเซลตามลำดับจึงได้ผลลัพธ์ดังที่เห็น หากเราเลื่อนเว็บเพจขึ้นลงรูปก็จะขยับตามไปด้วยเพราะเป็นการกำหนดตำแหน่งที่แน่นอนของเว็บเพจ ซึ่งจะต่างจากแบบ Fixed เพราะ Fixed การแสดงผลกับ เบราว์เซอร์เลย ขยับเว็บเพจ Fixed Element ก็ไม่ขยับ
