PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

06 December 2011 By


 ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน 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>
 

Tags:: css จัดตำแหน่ง





URL สำหรับอ้างอิง