ﺖﯿﻌﻗﻮﻣ ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
فهرست مطالب
ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻥﺁ ﻉﻮﻧ position ﯽﮔﮋﯾﻭ
ﺖﯿﻌﻗﻮﻣ ﯽﯾﺍﺭﺍﺩ
.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺭﻮﻣ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺵﻭﺭ ﻉﻮﻧ
.ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺎﺘﺴﯾﺍ ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ HTML ﺮﺻﺎﻨﻋ
.ﺪﻧﺮﯿﮔ ﯽﻤﻧ ﺭﺍﺮﻗ ﺖﺳﺍﺭ ﻭ ﭗﭼ ،ﻦﯿﯾﺎﭘ ،ﻻﺎﺑ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺮﯿﺛﺄﺗ ﺖﺤﺗ ﮏﯿﺗﺎﺘﺳﺍ ﺭﺩ ﺮﻘﺘﺴﻣ ﺮﺻﺎ
ﺖﺳﺍ ﻦﯾﺍ .ﺩﺮﯿﮔ ﯽﻤﻧ ﺭﺍﺮﻗ ﯽﺻﺎﺧ ﺵﻭﺭ ﻪﺑ position: static;
:ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ CSS ﺎﺠﻨﯾﺍ ﺭﺩ
ﻝﺎﺜﻣ
div.static {
position: static;
border: 3px solid #73AD21;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position ﯽﮔﮋﯾﻭ
.ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺩﻮﺧ ﯼﺩﺎﻋ ﺖﯿﻌﻗﻮﻣ ﻪﺑ ﺖﺒﺴﻧ position: rela
ﺩﻮﺷﯽﻣ ﺚﻋﺎﺑ ﻪﺘﻓﺎﯾﺖﯿﻌﻗﻮﻣ ﺎًﺘﺒﺴﻧ ﺮﺼﻨﻋ ﮏﯾ ﭗﭼ ﻭ ﻦﯿﯾﺎﭘ ،ﺖﺳﺍﺭ ،ﻻﺎﺑ ﯼﺎﻫﯽ
:ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ CSS ﺎﺠﻨﯾﺍ ﺭﺩ
ﻝﺎﺜﻣ
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
position: fixed;ﻪﺸﯿﻤﻫ ﻪﮐ ﯽﻨﻌﻣ ﻦﯾﺍ ﻪﺑ ،ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ viewport ﻪﺑ ﺖﺒﺴﻧ
.ﺪﻨﮐ ﯽﻤﻧ ﺩﺎﺠﯾﺍ ﯽﻓﺎﮑﺷ ،ﺖﻓﺮﮔ ﯽﻣ ﺭﺍﺮﻗ ﻥﺁ ﺭﺩ ﻻًﻮﻤﻌﻣ ﻪﮐ ﯼﺍ ﻪﺤﻔﺻ ﺭﺩ ﺖﺑﺎﺛ ﺮﺼﻨﻋ ﮏﯾ
:ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ CSS ﺎﺠﻨﯾﺍ ﺭﺩ .ﺪﯿﻨﮐ ﻪﺟﻮﺗ ﻪﺤﻔﺻ ﻦﯿﯾﺎﭘ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺷﻮﮔ ﺭﺩ ﺖﺑﺎﺛ ﺮﺼﻨﻋ
ﻝﺎﺜﻣ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
This <div> element has position: fixed;
position: absolute;.ﺩﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﻪﺘﻓﺎﯾﺖﯿﻌﻗﻮﻣ ﺪﺟ ﻦﯾﺮﺘﮑﯾﺩﺰﻧ ﻪﺑ ﺖﺒﺴﻧ
This <div> element has position: relative;
This <div> element has position: absolute;
ﻪﺸﯿﻤﻫ ﻪﮐ ﯽﻨﻌﻣ ﻦﯾﺍ ﻪﺑ ،ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ viewport ﻪﺑ ﺖﺒﺴﻧ
.ﺪﻨﮐ ﯽﻤﻧ ﺩﺎﺠﯾﺍ ﯽﻓﺎﮑﺷ ،ﺖﻓﺮﮔ ﯽﻣ ﺭﺍﺮﻗ ﻥﺁ ﺭﺩ ﻻًﻮﻤﻌﻣ ﻪﮐ ﯼﺍ ﻪﺤﻔﺻ ﺭﺩ ﺖﺑﺎﺛ ﺮﺼﻨﻋ ﮏﯾ
:ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ CSS ﺎﺠﻨﯾﺍ ﺭﺩ .ﺪﯿﻨﮐ ﻪﺟﻮﺗ ﻪﺤﻔﺻ ﻦﯿﯾﺎﭘ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺷﻮﮔ ﺭﺩ ﺖﺑﺎﺛ ﺮﺼﻨﻋ
ﻝﺎﺜﻣ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
position: fixed; position: absolute;.ﺩﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﻪﺘﻓﺎﯾﺖﯿﻌﻗﻮﻣ ﺪﺟ ﻦﯾﺮﺘﮑﯾﺩﺰﻧ ﻪﺑ ﺖﺒﺴﻧ
This <div> element has position: relative;
This <div> element has position: absolute;
.ﺩﺮﯿﮔﯽﻣ ﺭﺍﺮﻗ ﻪﺘﻓﺎﯾﺖﯿﻌﻗﻮﻣ ﺪﺟ ﻦﯾﺮﺘﮑﯾﺩﺰﻧ ﻪﺑ ﺖﺒﺴﻧ
This <div> element has position: relative;
:ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺎﻔﺘﺳﺍ CSS ﺎﺠﻨﯾﺍ ﺭﺩ
ﻝﺎﺜﻣ
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute; top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
position: sticky;.ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺮﺑﺭﺎﮐ ﻝﻭﺮﮑﺳﺍ ﺖﯿﻌﻗﻮﻣ ﺱﺎﺳﺍ ﺮﺑ position:
.(ﺖﺑﺎﺛ :ﺖﯿﻌﻗﻮﻣ ﺪﻨﻧﺎﻣ) ﺩﻮﺷ ﯽﻣ "ﺐﺴﭼ" ﺩﻮﺧ ﯼﺎﺟ ﺭﺩ ﺲﭙﺳ - ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﯽﺒﺴﻧ ﺩﺮﯿﮔ ﺭﺍﺮ
ﻪﺟﻮﺗ: Internet Explorer ﺪﻨﮐ ﯽﻤﻧ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻩﺪﻨﺒﺴﭼ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺯ
.ﺪﺒﺴﭼﯽﻣ
ﻝﺎﺜﻣ
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
ﺮﯾﻮﺼﺗ ﮏﯾ ﺭﺩ ﻦﺘﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ
:ﺮﯾﻮﺼﺗ ﯼﻭﺭ ﻦﺘﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﻩﻮﺤﻧ
ﻝﺎﺜﻣ
Bottom Left
Top Left
Top Right
Bottom Right
Centered
:ﻦﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﺕﺩﻮﺧ
→ ﭗﭼ ﺖﻤﺳ ﻻﺎﺑ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
→ ﺖﺳﺍﺭ ﺖﻤﺳ ﻻﺎﺑ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
→ ﭗﭼ ﺖﻤﺳ ﻦﯿﯾﺎﭘ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
→ ﺖﺳﺍﺭ ﺖﻤﺳ ﻦﯿﯾﺎﭘ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
→ ﺰﮐﺮﻣ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
.ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻭ ﻩﺪﺷ ﻩﺪﯾﺮﺑ ﻞﮑﺷ ﻦﯾﺍ ﻪﺑ ﺮﺼﻨﻋ .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻞﮑﺷ ﻢﯿﻈ
ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻞﮑﺷ
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
CSS ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
- bottom
ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﺖﯿﻌﻗﻮﻣ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- clip
ﺪﻨﮐ ﯽﻣ ﭗﯿﻠﮐ ﺍﺭ ﺖﯿﻌﻗﻮﻣ ﺭﺩ ﻼًﻣﺎﮐ ﺮﺼﻨﻋ ﮏﯾ
- left
ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺭﺍﺮﻗ ﺭﺩﺎﮐ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- position
ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﻉﻮﻧ
- right
ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﺖﯿﻌﻗﻮﻣ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- top
ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺭﺍﺮﻗ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
.ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺮﺑﺭﺎﮐ ﻝﻭﺮﮑﺳﺍ ﺖﯿﻌﻗﻮﻣ ﺱﺎﺳﺍ ﺮﺑ position:
.(ﺖﺑﺎﺛ :ﺖﯿﻌﻗﻮﻣ ﺪﻨﻧﺎﻣ) ﺩﻮﺷ ﯽﻣ "ﺐﺴﭼ" ﺩﻮﺧ ﯼﺎﺟ ﺭﺩ ﺲﭙﺳ - ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﯽﺒﺴﻧ ﺩﺮﯿﮔ ﺭﺍﺮ
ﻪﺟﻮﺗ: Internet Explorer ﺪﻨﮐ ﯽﻤﻧ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻩﺪﻨﺒﺴﭼ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺯ
.ﺪﺒﺴﭼﯽﻣ 0 :ﻻﺎﺑ<"code class="w3-codespan>) ﻪﺤﻔﺻ ﯼﻻﺎﺑ ﻪﺑ ﻩﺪﻨﺒﺴﭼ ﺮﺼﻨﻋ
ﻝﺎﺜﻣ
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
ﺮﯾﻮﺼﺗ ﮏﯾ ﺭﺩ ﻦﺘﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ
:ﺮﯾﻮﺼﺗ ﯼﻭﺭ ﻦﺘﻣ ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﻩﻮﺤﻧ
ﻝﺎﺜﻣ
:ﻦﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﺕﺩﻮﺧ
→ ﭗﭼ ﺖﻤﺳ ﻻﺎﺑ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
</body>
</html>
→ ﺖﺳﺍﺭ ﺖﻤﺳ ﻻﺎﺑ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
</div>
</body>
</html>
→ ﭗﭼ ﺖﻤﺳ ﻦﯿﯾﺎﭘ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomleft">Bottom Left</div>
</div>
</body>
</html>
→ ﺖﺳﺍﺭ ﺖﻤﺳ ﻦﯿﯾﺎﭘ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="bottomright">Bottom Right</div>
</div>
</body>
</html>
→ ﺰﮐﺮﻣ
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>
ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
.ﺩﻮﺷ ﯽﻣ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻭ ﻩﺪﺷ ﻩﺪﯾﺮﺑ ﻞﮑﺷ ﻦﯾﺍ ﻪﺑ ﺮﺼﻨﻋ .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻞﮑﺷ ﻢﯿﻈ
ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻞﮑﺷ
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140">
</body>
</html>
CSS ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
- bottom
ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﺖﯿﻌﻗﻮﻣ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﻦﯿﯾﺎﭘ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- clip
ﺪﻨﮐ ﯽﻣ ﭗﯿﻠﮐ ﺍﺭ ﺖﯿﻌﻗﻮﻣ ﺭﺩ ﻼًﻣﺎﮐ ﺮﺼﻨﻋ ﮏﯾ
- left
ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺭﺍﺮﻗ ﺭﺩﺎﮐ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﭗﭼ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- position
ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﻉﻮﻧ
- right
ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﺖﯿﻌﻗﻮﻣ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯿﺷﺎﺣ ﻪﺒﻟ
- top
ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻩﺪﺷ ﻩﺩﺍﺩ ﺭﺍﺮﻗ ﻪﺒﻌﺟ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﯽﯾﻻﺎﺑ ﻪﯿﺷﺎﺣ ﻪﺒﻟ