การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย
06 December 2011ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน css ในการกำหนดตำแหน่ง
ของข้อมูลที่ต้องการแสดง ซ้อนทับ บนรูปภาพที่ต้องการ โดยสามารถนำไปประยุกต์
เพิ่มเติมให้เหมาะกับรูปแบบตามต้องการได้
ตัวอย่าง
ซ้อนทับ ชิดขอบบน
ซ้อนทับ ชิดขอบซ้าย
ซ้อนทับ ชิดขอบล่าง
ซ้อนทับ ชิดขอบขวา
ตัวอย่างโค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.holder_wrap{
position:relative;
margin:auto;
display:block;
height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}
/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
position:absolute;
display:block;
background-color:#CC99FF;
height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
top:0px; /* css กำหนดชิดด้านบน */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
position:absolute;
display:block;
background-color:#99FFCC;
height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
top:0px; /* css กำหนดชิดด้านบน */
left:0px; /* css กำหนดชิดซ้าย */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
position:absolute;
display:block;
background-color:#FFCCCC;
height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
bottom:0px; /* css กำหนดชิดด้านล่าง */
z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
position:absolute;
display:block;
background-color:#FFFF99;
height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
top:0px; /* css กำหนดชิดด้านบน */
right:0px; /* css กำหนดชิดขวา */
z-index:999;
}
</style>
</head>
<body>
<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_top">
ซ้อนทับ ชิดขอบบน
</div>
</div>
</div>
<br style="clear:both;float:left;" />
<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_left">
ซ้อนทับ ชิดขอบซ้าย
</div>
</div>
</div>
<br style="clear:both;float:left;" />
<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_bottom">
ซ้อนทับ ชิดขอบล่าง
</div>
</div>
</div>
<br style="clear:both;float:left;" />
<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_right">
ซ้อนทับ ชิดขอบขวา
</div>
</div>
</div>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4677 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899 24 Jun 11 แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE อ่าน 754 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3127 05 Nov 08 CSS สร้างเมนูแนวนอน 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10432 08 Oct 08 การกำหนดสี scrollbar ของ textarea อ่าน 3305 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 3766 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4696 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 25 Sep 08 ตรวจสอบนามสกุลไฟล์ ก่อนทำการอัพโหลด อ่าน 3333 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 1037 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13253 12 Aug 10 ประยุกต์ ใช้ jQuery สร้างข้อความเลื่อน ซ้าย ขวา คล้าย marquee อ่าน 2628 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 1504 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 9078 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3155 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1206 21 Mar 11 การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติม อ่าน 2701 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3513