F0NTCAMP02 | เบซิกเบสิก CSS

Layiji · 17 ส.ค. 2009, 18:31 น.

ยังไม่ค่อยเข้าใจเรื่อง position เท่าไหร่เลยครับ

เท่าที่อ่านคือ fix ไว้แปะตรงตำแหน่งนั้นๆของจอ เหมือนพวก โฆษณา popup (เข้าใจถูกมั้ยครับ)

ส่วน relative กับ absolute , inherit นี่มันใช้กันยังไงเหรอครับ

เหมือนเวลา div สองตัวมาเจอกันแล้วมันจะส่งผลอะไรกันด้วย

มันมีหลักในการใช้ยังไงเหรอครับ

JÎ›NÎ£ · 17 ส.ค. 2009, 21:17 น.

หวายๆ พวกมนุษย์ table

ผมก้าวขาออกมาข้างนึงแล้วล่ะ

ณัฏฐ์ · 17 ส.ค. 2009, 21:24 น.

สรุป

พี่อรจดได้ละเอียดมากๆ
พี่กวางด้วย

หนูอร · 17 ส.ค. 2009, 21:28 น.

การกำหนด position

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

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

position:absolute
      ปกติจะกำหนดตำแหน่งตรงขอบวัตถุ ซึ่งหลักการการทับซ้อนก็จะเหมือนของ relative ค่ะ (มาก่อนอยู่ล่างมาหลังอยู่บน)

position:fixed
      กำหนดที่เฉพาะเจาะจง ให้มันอยู่ตรงไหนมันก็จะอยู่ตรงนั้น

อีกเรื่องที่เกี่ยวกับ position ก็คือ z-index โดย z-index เป็นตัวกำหนดว่าวัตถุนั้นจะอยู่หน้าหรืออยู่หลัง.. โดยค่าปกติของ z-index จะอยู่ที่ 0 ..ถ้ากำหนดค่า z-index เป็น 1 วัตถุนั้นก็จะอยู่บน และถ้าเป็น -1 ก็จะอยู่หลังค่ะ

หนูอร · 17 ส.ค. 2009, 21:42 น.

สมมุติเราทำงานโดยทำ div background และทำ div กล่องข้อความออกมาสองตัวชื่อ sample.html และมี stylesheet ชื่อ sample.css

โค้ด เลือกทั้งหมด


<html>
     <head>
          <link rel="stylesheet" type="text/css" href="sample.css" />
     </head>
       <div id="bg">
          <div id="div1">
	<p>this is div 1</p>
          </div>
          <div id="div2">
               <p>this is div2</p>
          </div>
       </div>

     </body>
</html>

โค้ด เลือกทั้งหมด


#bg{
     width:800px;
     height:100%;
     background:#09c;
     absolute: relative;
     margin: 0 auto;
     overflow:hidden;
}

#div1{
     background:yellow;
     width: 200px;
     height: 100px;
}

#div2{
     background:red;     
     width: 300px;
     height: 100px;
}

ลองเอา code ข้างบนไปปรับค่า position หลายๆแบบดูนะคะ ว่าแต่ละอันจะส่งผลยังไง

เดี๋ยวพรุ่งนี้มาต่อในหัวข้อ float ul li span และการตั้งค่าอื่นๆนะคะ

เดอะบุ๋ม · 17 ส.ค. 2009, 22:15 น.

บวกจ้ะ ขอบคุณหนูอรกะกวางอีกที

sleepytee · 17 ส.ค. 2009, 22:34 น.

ทำงานได้ดีมาก "สุดยอดนักกินจุ" สมกะตำแหน่งเลขาของเค้าจริงๆ

คือว่า ผมจำอะไรไม่ได้นอกจากของกินครับ

พี่โบพี่แอนครับ ผมมีคำถามครับ

ไส้กรอก 1 กก. ที่ผมกะอรหิ้วมามันหายไปไหนง่ะครับ?

กลับถึงบ้านแล้วเพิ่งจะนึกออก เหมือนขาดอะไรไป

eThics · 17 ส.ค. 2009, 22:42 น.

ถ้าไม่มีรูปก็จำรายการอาหารที่ขนออกมากินกันไม่ได้

มันวูบวาบๆ แผล้บบบบเดียวหายเกลี้ยง

แต่จำได้แม่นว่า
โบว์ผัดข้าวจนไข่เกลี้ยงตู้เย็น

X11 · 17 ส.ค. 2009, 22:57 น.

อ้างคำพูดจาก: sleepytee เมื่อ 17 ส.ค. 2009, 22:34 น.
ทำงานได้ดีมาก "สุดยอดนักกินจุ" สมกะตำแหน่งเลขาของเค้าจริงๆ

คือว่า ผมจำอะไรไม่ได้นอกจากของกินครับ

พี่โบพี่แอนครับ ผมมีคำถามครับ

ไส้กรอก 1 กก. ที่ผมกะอรหิ้วมามันหายไปไหนง่ะครับ?

กลับถึงบ้านแล้วเพิ่งจะนึกออก เหมือนขาดอะไรไป

ยังอยู่ในตู้เย็นมั้งจ้ะ

iannnnn · 17 ส.ค. 2009, 23:23 น.

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

ส่วน no-fixed นี่ไม่รู้ว่ามีหรือเปล่า ไม่เคยใช้

เอาเป็นว่าปกติแล้วมันเป็นค่า default อยู่แล้ว ไม่ต้องไปรู้มันหรอกครับ ข้ามไปเลย

หนูอร · 18 ส.ค. 2009, 00:04 น.

เอ้อ มันไม่มีล่ะพี่แอน เขียนตอนเล็กเชอร์ เอามาจากไหนก็ไม่รู้

อ้างคำพูดจาก: sleepytee เมื่อ 17 ส.ค. 2009, 22:34 น.

ไส้กรอก 1 กก. ที่ผมกะอรหิ้วมามันหายไปไหนง่ะครับ?

กลับถึงบ้านแล้วเพิ่งจะนึกออก เหมือนขาดอะไรไป

ของถวายยักษ์ ถวายแล้วถวายเลยนะคะ จะถามถึงทำไม

iannnnn · 18 ส.ค. 2009, 00:08 น.

ถูกใจหลาย

ณัฏฐ์ · 18 ส.ค. 2009, 00:15 น.

กันย์ · 18 ส.ค. 2009, 00:31 น.

จำใจยอม

เดอะบุ๋ม · 18 ส.ค. 2009, 11:12 น.