انواع Position در زبان CSS

          برنامه نویس 
            بازدید : 51
          پنجشنبه 27 تیر 1398
           نظرات (0)
        

خصوصیت position نحوه ی موقعیت گیری عناصر در صفحه ی HTML را مشخص می کند و می تواند هر کدام از مقادیر زیر را بگیرد:

static
relative
fixed
absolute
sticky

این پنج حالت مختلف رفتار و عکس العمل عنصر مورد نظر را نسبت به دستورات top و bottom و left و right، مشخص می کنند. بیایید تک تک آن ها را بررسی کنیم.

position: static

static در لغت به معنی «ایستا» یا «ساکن» یا همان استاتیک خودمان است! عناصری که مقدار static را داشته باشند، همانطور که از نامشان می توان حدس زد، نسبت به دستورات top و bottom و … بی تفاوت هستند و تغییری نمی کنند. در واقع عنصری که ;position: static است به هیچ شکل خاصی موقعیت دهی نشده است و هر طور که صفحه جا داشته باشد و به او اجازه می دهد در مکان خاصی قرار می گیرد.

به مثال زیر توجه کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPEhtml>
<html>
<head>
<style>
div.static {
  position:static;
  border:3pxsolid#73AD21;
}
</style>
</head>
<body>
 
<h2>position:static;</h2>
 
<p>An element with position:static;isnotpositioned inany special way;it is
always positioned according tothe normal flow of the page:</p>
 
<div class="static">
  Thisdiv element has position:static;
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در واقع با چشم عادی و در یک مثال ساده هیچ راهی برای تشخیص عناصر Static وجود ندارد به جز اینکه به کدهای صفحه نگاهی بیندازید!

position: relative

relative در لغت به معنی «نسبی» است. عناصری که به صورت ;position: relative هستند، نسبت به موقعیت عادی خود موقعیت دهی می شوند. بنابراین استفاده از دستورات top, right, bottom, left برای عناصری که از نوع relative هستند، باعث دور شدن این عناصر از موقعیت اصلی شان می شود. به مثال زیر نگاه کنید:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPEhtml>
<html>
<head>
<style>
div.relative {
  position:relative;
  left:30px;
  border:3pxsolid#73AD21;
}
</style>
</head>
<body>
 
<h2>position:relative;</h2>
 
<p>An element with position:relative;ispositioned relative toits normal position:</p>
 
<div class="relative">
Thisdiv element has position:relative;
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال می بینید که عنصر div ما از سمت چپ 30 پیکسل فاصله گرفته است و به همین خاطر کمی جلوتر آمده است! حالا متوجه مفهوم نسبی بودن شدید؟ عنصر ما نسبت به مکان اصلی خود در سمت چپ، 30 پیکسل حرکت کرده است.

position: fixed

fixed در لغت به معنی «ثابت» یا «تثبیت شده» است. همانطور که از نامش حدس می زنید عناصری که از نوع ;position: fixed باشند همیشه در یک قسمت ثابت از صفحه قرار دارند و هیچ گاه از آن حالت خارج نمی شوند. حتی اگر صفحه را اسکرول کنید، این عناصر همراه با اسکرول شما حرکت می کنند و از جایشان تکان نمی خورند.

دستورات top, right, bottom, left نیز برای تعیین موقعیت آن ها در صفحه استفاده می شوند. از آنجایی که عناصر fixed همیشه ثابت هستند، فضایی را در صفحه ی ما اشغال نمی کنند و انگار یک لایه از دیگر عناصر بالاتر هستند. به کد زیر نگاه کنید:

 



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

<!DOCTYPEhtml>
<html>
<head>
<style>
div.fixed {
  position:fixed;
  bottom:80px;
  right:5px;
  width:350px;
  border:5pxsolid#73AD21;
}
</style>
</head>
<body>
 
<h2>position:fixed;</h2>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<p>An element with position:fixed;ispositioned relative tothe viewport,which means it always stays inthe same place even ifthe page isscrolled:</p>
 
<div class="fixed">
Thisdiv element has position:fixed;
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

زمانی که وارد صفحه ی خروجی کد بالا شدید متوجه می شوید حتی با اسکرول نیز نمی توانید از شر عنصر div کنار صفحه راحت شوید. این عنصر کاملا در جای خود ثابت است (اضافه کردن پاراگراف های تکراری به این خاطر است که صفحه قابلیت اسکرول داشته باشد).

position: absolute

absolute در لغت به معنی «مطلق» یا «کامل» است. عناصری که از نوع ;position: absolute هستند نسبت به اولین جد/پدرشان موقعیت دهی می شوند. در مورد عناصر fixed این موضوع صادق نبود، چرا که عناصر fixed بر اساس viewport موقعیت دهی می شدند. البته اگر عناصر absolute هیچ پدر یا parent ای نداشته باشند که قبلا positioned نشده باشد (یعنی عنصری که مقدار position آن هر چیزی به غیر از static باشد)، از بدنه ی سند HTML استفاده کرده و با اسکرول پیج حرکت می کنند.

به مثال زیر توجه کنید:

 



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

<!DOCTYPEhtml>
<html>
<head>
<style>
div.relative {
  position:relative;
  width:400px;
  height:200px;
  border:3pxsolid#73AD21;
}
 
div.absolute {
  position:absolute;
  top:80px;
  right:0;
  width:200px;
  height:100px;
  border:3pxsolid#73AD21;
}
</style>
</head>
<body>
 
<h2>position:absolute;</h2>
 
<p>An element with position:absolute;ispositioned relative tothe nearest positioned ancestor(instead of positioned relative tothe viewport,like fixed):</p>
 
<div class="relative">Thisdiv element has position:relative;
  <div class="absolute">Thisdiv element has position:absolute;</div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده می کنید، عنصر ما نسبت به عنصر پدر خود (یعنی عنصری که عنصرِ absolute در آن قرار دارد) موقعیت دهی می شود.

position: sticky

sticky به معنی «چسبنده» است. عناصری که از نوع ;position: sticky باشند بر اساس موقعیت اسکرول بار موقعیت دهی می شوند. در واقع هر عنصر sticky بر اساس حرکت اسکرول بار بین حالت های relative و fixed تغییر می کند؛ در حالت کلی relative است اما زمانی که به یک نقطه ی خاص برسد تبدیل به fixed می شود و سر جایش می چسبد.

نکته: مرورگرهای Internet Explorer و Edge 15 و نسخه های قدیمی تر از موقعیت sticky پشتیبانی نمی کنند.

به مثال زیر توجه کنید:

 



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

<!DOCTYPEhtml>
<html>
<head>
<style>
div.sticky {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  padding:5px;
  background-color:#cae8ca;
  border:2pxsolid#4CAF50;
}
</style>
</head>
<body>
 
<p>Tryto<b>scroll</b>inside thisframe tounderstand how sticky positioning works.</p>
<p>Note:IE/Edge15andearlier versions donotsupport sticky position.</p>
 
<div class="sticky">Iam sticky!</div>
 
<div style="padding-bottom:2000px">
  <p>Inthisexample,the sticky element sticks tothe top of the page(top:0),when you reach its scroll position.</p>
  <p>Scroll back up toremove the stickyness.</p>
  <p>Some text toenable 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 toenable 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>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده می کنید با اسکرول کردن صفحه، موقعیت نوار سبز رنگ نیز تغییر می کند و Fixed می شود.

لایه بندی عناصر

برخی اوقات عناصری که موقعیت دهی می شوند ممکن است روی یکدیگر قرار بگیرند. برای آنکه مشخص کنیم کدام عنصر روی کدام قرار بگیرد، یا به عبارتی عنصری که رو قرار می گیرد کدام باشد از خاصیت z-index استفاده میکنیم که می تواند مقادیر مثبت یا منفی بگیرد.

مثال:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPEhtml>
<html>
<head>
<style>
img {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
}
</style>
</head>
<body>
 
<h1>Thisisaheading</h1>
<img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png"width="250">
<p>Because the image hasaz-index of-1,it will be placed behind the text.</p>
 
</body>
</html>

مشاهده ی خروجی در JSBin

هر چقدر مقدار z-index برای عنصری بیشتر باشد، آن عنصر بالاتر خواهد بود و بنابراین روی عناصر دیگر نمایش داده می شود و هر چه مقدار آن کمتر باشد (مثلا منفی باشد) عنصر پایین تر خواهد رفت. در مثال بالا می بینید که لوگوی روکسو z-index کمتری نسبت به متن دارد بنابراین متن روی آن نشان داده می شود.

نکته: اگر دو عنصر روی هم قرار بگیرند و برای هیچ کدام از z-index استفاده نکنیم، عنصری بالاتر قرار می گیرد که در سورس کد HTML پایین تر از بقیه ی عناصر باشد (از نظر اینکه خط چندم باشد). به طور مثال عنصری که در خط 200 اُم سند HTML ما تعریف شده است همیشه روی عنصری خواهد بود که در خط 100 اُم تعریف شده است.

با استفاده از همین قانون می توانیم متون خود را روی تصاویر نیز قرار بدهیم:

 



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

<!DOCTYPEhtml>
<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 toan image inthe top right corner:</p>
 
<div class="container">
  <img src="https://www.w3schools.com/css/img_5terre_wide.jpg"alt="Cinque Terre"width="1000"height="300">
  <div class="topright">Top Right</div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید.

منبع: روکسو

ارسال نظر برای این مطلب