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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
จัดตำแหน่ง css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ จัดตำแหน่ง css

ดูแล้ว 74,991 ครั้ง


 ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน css ในการกำหนดตำแหน่ง

ของข้อมูลที่ต้องการแสดง ซ้อนทับ บนรูปภาพที่ต้องการ โดยสามารถนำไปประยุกต์
เพิ่มเติมให้เหมาะกับรูปแบบตามต้องการได้
 
ตัวอย่าง
 
ซ้อนทับ ชิดขอบบน

ซ้อนทับ ชิดขอบซ้าย

ซ้อนทับ ชิดขอบล่าง

ซ้อนทับ ชิดขอบขวา
 
ตัวอย่างโค้ดทั้งหมด
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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="//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="//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="//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="//www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_right">
ซ้อนทับ ชิดขอบขวา
</div>
</div>
</div>
 
 
 
 
</body>
</html>
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





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







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ