z-index ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ

فهرست مطالب

نمایش فهرست مطالب

ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ z-index ﯽﮔﮋﯾﻭ

z-index ﯽﮔﮋﯾﻭ

.ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﻧﺎﺷﻮﭙﻤﻫ ﺮﮕﯾﺩ ﺮﺻﺎﻨﻋ ﺎﺑ ﺪﻨﻧﺍﻮﺗ ﯽﻣ ،ﺪﻧﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﺖﯿﻌﻗﻮﻣ ﺭﺩ ﺮﺻﺎﻨﻋ ﻪ

.(ﺩﺮﯿﮔ ﺭﺍﺮﻗ ﺮﺻﺎﻨﻋ ﺮﯾﺎﺳ ﺖﺸﭘ ﺎﯾ ﻮﻠﺟ ﺭﺩ ﺪﯾﺎﺑ ﻪﮐ) ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﺘﺸﭘ ﺐﯿﺗﺮ

:ﺪﺷﺎﺑ ﯽﻔﻨﻣ ﺎﯾ ﺖﺒﺜﻣ ﻪﺘﺸﭘ ﺐﯿﺗﺮﺗ ﯼﺍﺭﺍﺩ ﺪﻧﺍﻮﺗ ﯽﻣ ﺮﺼﻨﻋ ﮏﯾ

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

ﻝﺎﺜﻣ

img
{
   
position: absolute;
  left: 0px;
   
top: 0px;
   
z-index: -1;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

ﻪﺟﻮﺗ: z-index ﻖﻠﻄﻣ :ﺖﯿﻌﺿﻭ) ﺪ

ﺮﮕﯾﺩ z-index ﻝﺎﺜﻣ ﮏﯾ

ﻝﺎﺜﻣ

:ﺩﺭﺍﺩ ﺭﺍﺮﻗ ﺮﺗ ﻦﯿﯾﺎﭘ ﻪﺘﺸﭘ ﺐﯿﺗﺮﺗ ﺎﺑ ﯼﺮﺼﻨﻋ ﯼﻻﺎﺑ ﻪﺸﯿﻤﻫ ﺮﺘﺸﯿﺑ ﻪﺘﺸﭘ ﺐﯿﺗﺮﺗ ﺎﺑ ﺮﺼﻨﻋ ﮏﯾ

 <html>
<head>
<style>
.container {
  position: relative;
}
  
.black-box {
  position: relative;
  z-index: 1;
  
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px; 
  
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  
  width: 35%;
  left: 270px;
  top: -15px;
  height: 
  100px;
}
</style>
</head>
<body>
  
<div class="container">
  <div 
  class="black-box">Black box</div>
  <div class="gray-box">Gray 
  box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3; /* gray box will be above both green and black box */
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2; /* green box will be above black box */
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Z-index Example</h1>

<p>An element with greater stack order is always above an element with a lower stack order.</p>

<div class="container">
  <div class="black-box">Black box (z-index: 1)</div>
  <div class="gray-box">Gray box (z-index: 3)</div>
  <div class="green-box">Green box (z-index: 2)</div>
</div>

</body>
</html>

z-index ﻥﻭﺪﺑ

ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﻧﺎﺷﻮﭙﻤﻫ ﺮﮕﯾﺪﮑﯾ ﯼﻭﺭ z-index ﻥﻭﺪﺑ

ﻝﺎﺜﻣ

:ﺖﺳﺍ ﻩﺪﺷ ﺺﺨﺸﻣ z-index ﻥﻭﺪﺑ ﺎﺠﻨﯾﺍ ﺭﺩ ﺎﻣﺍ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﻥﺎﻤﻫ

 <html>
<head>
<style>
.container {
  position: relative;
}
  
.black-box {
  position: relative;
  
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  
  position: absolute;
  background: lightgray;
  height: 60px; 
  
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  
  width: 35%;
  left: 270px;
  top: -15px;
  height: 
  100px;
}
</style>
</head>
<body>
  
<div class="container">
  <div 
  class="black-box">Black box</div>
  <div class="gray-box">Gray 
  box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Overlapping elements</h1>

<p>If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

CSS ﯽﮔﮋﯾﻭ

z-index: ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻪﺘﺸﭘ ﺐﯿﺗﺮﺗ