0:00:00.000,0:00:01.933
ახლა ჩვენ ვისწავლით, [br]როგორ გამოვიყენოთ CSS

0:00:01.933,0:00:03.843
ელემენტების გადაადგილებისთვის.

0:00:03.843,0:00:06.004
არა უბრალოდ ერთმანეთის გვერდით[br]დასალაგებლად,

0:00:06.004,0:00:07.537
არამედ ერთმანეთის მიყოლებით[br]

0:00:07.537,0:00:09.029
ერთი მეორეს შემდეგ დასაწყობად.

0:00:09.029,0:00:11.611
აქ გვაქვს ვებ-გვერდი

0:00:11.611,0:00:16.041
რამდენიმე სათაურითა და სურათებით და

0:00:16.041,0:00:18.069
კიდევ გვაქვს რამდენიმე აბზაცი

0:00:18.069,0:00:20.155
ეს ყველაფერი ახლა განლაგებულია

0:00:20.155,0:00:22.177
სტანდარტული წყობის მიხედვით.

0:00:22.177,0:00:24.212
რასაც ძირითადად იყენებს ბრაუზერი.

0:00:24.212,0:00:26.959
ჩვენ მას სტატიკურ ან ჩვეულებრივ[br]განლაგებას ვუწოდებთ,

0:00:26.959,0:00:29.388
რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,

0:00:29.388,0:00:30.699
მაგალითად, სურათები,

0:00:30.699,0:00:32.297
განლაგებულია მარცხნიდან მარჯვნივ

0:00:32.297,0:00:33.800
ბლოკები კი, ისეთები, როგორც[br]

0:00:33.800,0:00:35.490
სათაურები(ჰედერები) და აბზაცები

0:00:35.490,0:00:37.565
განლაგებულია ზემოდან ქვემოთ.

0:00:37.565,0:00:39.915
შეგვიძლია, შევცვალოთ განლაგების სტრატეგია

0:00:39.915,0:00:42.670
CSS-ის პოზიციონირების თვისების გამოყენებით

0:00:42.670,0:00:45.621
მოდი ვცადოთ ეს ამ სურათის მაგალითზე.

0:00:45.621,0:00:49.177
დავწეროთ: position:

0:00:49.177,0:00:51.446
და შემდეგ მნიშვნელობად მივუთითოთ[br]relative

0:00:51.446,0:00:53.406
relative განლაგების სტრატეგია

0:00:53.406,0:00:55.407
ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ

0:00:55.407,0:00:57.791
შემდეგ კი რაღაც მანძილით დავაშოროთ

0:00:57.791,0:01:00.156
ახლა მივუთითოთ ბრაუზერს,[br]

0:01:00.156,0:01:01.501
რა მანძილით გვინდა დაშორება

0:01:01.501,0:01:03.140
ამისთვის უნდა გამოვიყენოთ

0:01:03.140,0:01:05.179
CSS-ის ოთხი ახალი[br]თვისების კომბინაცია

0:01:05.179,0:01:07.425
ზედა, ქვედა, მარცხენა და მარჯვენა.

0:01:07.425,0:01:09.441
მაგალითად, გვინდა დავაშოროთ

0:01:09.441,0:01:13.575
ოცი პიქსელით ქვემოდან

0:01:13.626,0:01:15.222
და კიდევ ათით...

0:01:15.222,0:01:16.675
დავუშვათ, ათით მარცხნიდან.

0:01:16.675,0:01:18.668
კარგია, არა?

0:01:18.668,0:01:20.893
მაგრამ კიდევ უფრო მაგარი რამე

0:01:20.893,0:01:23.472
შემიძლია გაჩენოთ.

0:01:23.472,0:01:25.077
კერძოდ, აბსოლუტური განლაგება.

0:01:25.077,0:01:26.273
ეს შეგვიძლია გამოვიყენოთ

0:01:26.273,0:01:28.525
თუ გვინდა ამოვიღოთ ელემენტი[br]სტანდარტული წყობიდან

0:01:28.525,0:01:30.613
და ეკრანზე რომელიმე სხვა[br]ადგილას დავსვათ.

0:01:30.613,0:01:31.664
ამისთვის

0:01:31.664,0:01:32.945
შევცვალოთ relative მნიშვნელობა

0:01:32.945,0:01:34.042
ჩავწეროთ absolute

0:01:34.042,0:01:35.199
მაგრამ დავტოვოთ

0:01:35.199,0:01:36.575
ზემოთა და მარცხენა თვისებები

0:01:36.575,0:01:37.778
როგორც ხედავთ

0:01:37.778,0:01:39.213
ახლა ჩვენი სურათი

0:01:39.213,0:01:41.345
ფარავს როგორც სხვა სურათებს, [br]ასევე ჰედერს.

0:01:41.345,0:01:42.772
ეს არ გვაწყობს, გამოვასწოროთ.

0:01:42.772,0:01:44.791
დავიწყოთ უინსტონით.

0:01:44.791,0:01:48.456
დავამატოთ მისთვის წესი

0:01:48.456,0:01:52.096
position: absolute

0:01:52.096,0:01:54.302
და, დავუშვათ,

0:01:54.302,0:01:56.110
ზემოდან 40 პიქსელი

0:01:56.110,0:01:58.394
არა, 50 იყოს

0:01:58.394,0:02:00.055
და 50 მარცხნივ

0:02:00.055,0:02:02.204
აი, ახლა კარგია.

0:02:02.204,0:02:04.302
ჰუპერსაც უნდა ზემოთ

0:02:04.302,0:02:05.617
ამიტომ

0:02:05.617,0:02:07.295
მასაც მივანიჭოთ

0:02:07.295,0:02:11.661
position: absolute

0:02:11.661,0:02:15.218
თვისებები: top: 30

0:02:15.218,0:02:17.814
left:70

0:02:17.814,0:02:19.613
ჩემი მიზანია

0:02:19.613,0:02:21.216
ჩანდეს ისე, თითქოს ჰუპერი

0:02:21.216,0:02:23.743
უინსტონის ირგვლივ ცეკვავს.

0:02:23.743,0:02:26.170
მაგრამ ჯერ–ჯერობით კომპოზიცია[br]ასე არ გამოიიყურება

0:02:26.170,0:02:28.244
იმიტომ რომ უინსტონი

0:02:28.244,0:02:30.358
ჰოპერის ზემოდან ხატია.

0:02:30.358,0:02:31.948
ამის გამოსასწორებლად

0:02:31.948,0:02:33.619
შემიძლია ან შევცვალო

0:02:33.619,0:02:35.136
სურათების თეგების თანმიმდევრობა

0:02:35.136,0:02:36.684
HTML-ში

0:02:36.684,0:02:38.699
მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები

0:02:38.699,0:02:42.257
CSS–ის z ინდექსის გამოყენებით

0:02:42.257,0:02:43.939
შეგვიძლია ვუთხრათ ბრაუზერს

0:02:43.939,0:02:44.856
რა თანმიმდევრობით

0:02:44.856,0:02:46.035
უნდა ჩახატოს ელემენტები

0:02:46.035,0:02:47.044
ამისთვის მათ სხვაობის

0:02:47.044,0:02:48.247
ინდექსები უნდა მიანიჭოს.

0:02:48.247,0:02:50.691
დავიწყოთ ლანდშაფტით.

0:02:50.691,0:02:53.268
მისი z ინდექსი იქნება 1

0:02:53.268,0:02:56.345
უინსტონის - 2

0:02:56.345,0:02:59.054
ჰოპერის – 3

0:02:59.054,0:03:00.081
კარგია!

0:03:00.081,0:03:02.641
ახლა ჰოპერი უინსტონის წინ ცეკვავს

0:03:02.641,0:03:04.178
მოსწონს ეს თუ არა

0:03:04.178,0:03:05.239
უწევს;

0:03:05.239,0:03:07.801
ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ

0:03:07.801,0:03:09.991
ჰედერებსა და სვეტებს

0:03:09.991,0:03:12.450
აბა..

0:03:12.450,0:03:13.942
მინდა, რომ ეს ცეკვა

0:03:13.942,0:03:16.886
ყველაფერზე მაღლა იყოს განლაგებული

0:03:16.886,0:03:19.081
ამიტომ მივანიჭებ

0:03:19.081,0:03:20.698
აბსოლურ პოზიციას

0:03:20.698,0:03:21.757
და z ინდექს 4–ს

0:03:21.757,0:03:22.997
კარგია.

0:03:22.997,0:03:25.251
ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ

0:03:25.252,0:03:26.912
ან კიდევ ოდნავ მეტით

0:03:26.912,0:03:28.518
აჰა, ასე კარგია.

0:03:28.518,0:03:29.688
ახლა სიმღერის ტექსტს მივადგეთ.

0:03:29.688,0:03:31.113
მინდა, რომ ის ყველაფრის

0:03:31.113,0:03:32.816
ქვემოთ ჩანდეს უბრალოდ.

0:03:32.816,0:03:35.525
ამიტომ, მივანიჭოთ

0:03:35.525,0:03:38.219
შედარებითი პოზიცია

0:03:38.219,0:03:39.468
და დავაყენოთ ზედა ზღვარი

0:03:39.468,0:03:40.679
რომელიც სურათის სიმაღლეს [br]

0:03:40.679,0:03:42.574
უნდა უდრიდეს;

0:03:42.574,0:03:45.119
რაც 220 პიქსელია

0:03:45.119,0:03:48.425
მშვენიერია, მომწონს, როგორც გამოვიდა

0:03:48.425,0:03:50.129
მშვენიერი წვეულება

0:03:50.129,0:03:52.179
მოგვიწყვია.

0:03:52.179,0:03:53.822
ახლა თუ დააპაუზებთ ვიდეოს

0:03:53.822,0:03:55.770
და ჩამოწევთ გვერდს

0:03:55.770,0:03:58.051
დაინახავთ, რომ ყველაფერი[br]

0:03:58.051,0:03:59.209
ერთად მოძრაობს

0:03:59.209,0:04:00.989
მნიშვნელოვანი კი ის არის,

0:04:00.989,0:04:02.836
რომ აბსოლუტური პოზიცია დამოკიდებულია

0:04:02.836,0:04:04.053
გვერის ზემოთა ზღვარზე

0:04:04.053,0:04:06.017
ამიტომ, როცა გვერდს სქროლავთ

0:04:06.040,0:04:07.733
ყველაფერი, რაც ზემოთ იყო

0:04:07.733,0:04:10.550
ნელ–ნელა ქრება,

0:04:10.550,0:04:11.919
იმიტომ რომ თქვენ შორდებით

0:04:11.919,0:04:14.640
გვერდის ზემოთა ნაწილს

0:04:14.640,0:04:15.807
მეორე ვარიანტია

0:04:15.807,0:04:17.109
ფიქსირებული პოზიცია,

0:04:17.109,0:04:18.765
ამ შემთხვევაში გამოჩნდება თითქოს

0:04:18.765,0:04:20.354
არაფერი არ მოძრაობს საერთოდ

0:04:20.354,0:04:22.097
თუ გინდათ სცადოთ,

0:04:22.097,0:04:23.051
უბრალოდ შეცვალეთ

0:04:23.051,0:04:25.693
h1 აბსოლუტურიდან ფიქსირებულზე

0:04:25.693,0:04:29.073
მერე კი დააპაუზეთ და ჩამოსქროლეთ

0:04:29.073,0:04:31.085
დაინახავთ, რომ

0:04:31.085,0:04:33.678
ჩვენი წვეულება იმავე ადგილას რჩება

0:04:33.678,0:04:35.667
იმიტომ რომ ახლა ის დამოკიდებულია

0:04:35.667,0:04:39.216
ეკრანის ზედა ზღვარზე,

0:04:39.216,0:04:40.852
ბრაუზერის ფანჯარაზე.

0:04:40.852,0:04:43.917
აი, ასევ ისწავლეთ

0:04:43.917,0:04:45.941
სამი სხვადასხვა პოზიციის გამოყენება.

0:04:45.941,0:04:47.697
და შეგვიძლია ბევრი მაგარი რამის გაკეთება

0:04:47.697,0:04:48.519
შეიძლება გაინტერესებთ,

0:04:48.519,0:04:51.071
როდის ვიყენებთ აბსოლუტურ[br]და ფიქსირებულ პოზიციებს?

0:04:51.071,0:04:53.109
ჰმ.. მაგალითად,

0:04:53.109,0:04:54.183
თამაშის შექმნისას

0:04:54.183,0:04:55.693
როგორც აქ გავაკეთე ეს

0:04:55.693,0:04:57.219
როცა სცენის ყველა ნაწილის

0:04:57.219,0:04:58.864
გამოჩენა გინდათ ბრაუზერში

0:04:58.864,0:05:00.229
მაგრამ ასევე გამოიყენეთ

0:05:00.229,0:05:01.634
ჩვეულებრივი ვებ–გვერდებისთვის

0:05:01.634,0:05:02.936
მაგალითად, ხანის აკადემიაზე

0:05:02.936,0:05:04.913
იმ მოდულებისთვის, გვერდის შუაში[br]რომ ხტება

0:05:04.913,0:05:06.279
აბსოლუტურ პოზიციას ვიყენებთ.

0:05:06.279,0:05:07.380
ფიქსირებულს კი ვიყენებთ

0:05:07.380,0:05:08.791
ძებნის ველისთვის ზოგ გვერდზე

0:05:08.791,0:05:11.813
რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო[br]მისი გამოყენება

0:05:11.813,0:05:14.232
პოზიციები შეიძლება არ გამოიყენო

0:05:14.232,0:05:15.431
ყოველ გვერდზე

0:05:15.431,0:05:16.704
მაგრამ როცა გამოიყენებ,

0:05:16.704,0:05:18.967
ძალიან გაგიხარდება მათი არსებობა.