WEBVTT

00:00:00.000 --> 00:00:01.933
ახლა ჩვენ ვისწავლით, 
როგორ გამოვიყენოთ CSS

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

00:00:03.843 --> 00:00:06.004
არა უბრალოდ ერთმანეთის გვერდით
დასალაგებლად,

00:00:06.004 --> 00:00:07.537
არამედ ერთმანეთის მიყოლებით


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

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

00:00:11.611 --> 00:00:16.041
რამდენიმე სათაურითა და სურათებით და

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

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

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

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

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

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

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

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

00:00:32.297 --> 00:00:33.800
ბლოკები კი, ისეთები, როგორც


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

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

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

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

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

00:00:45.621 --> 00:00:49.177
დავწეროთ: position:

00:00:49.177 --> 00:00:51.446
და შემდეგ მნიშვნელობად მივუთითოთ
relative

00:00:51.446 --> 00:00:53.406
relative განლაგების სტრატეგია

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

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

00:00:57.791 --> 00:01:00.156
ახლა მივუთითოთ ბრაუზერს,


00:01:00.156 --> 00:01:01.501
რა მანძილით გვინდა დაშორება

00:01:01.501 --> 00:01:03.140
ამისთვის უნდა გამოვიყენოთ

00:01:03.140 --> 00:01:05.179
CSS-ის ოთხი ახალი
თვისების კომბინაცია

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

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

00:01:09.441 --> 00:01:13.575
ოცი პიქსელით ქვემოდან

00:01:13.626 --> 00:01:15.222
და კიდევ ათით...

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

00:01:16.675 --> 00:01:18.668
კარგია, არა?

00:01:18.668 --> 00:01:20.893
მაგრამ კიდევ უფრო მაგარი რამე

00:01:20.893 --> 00:01:23.472
შემიძლია გაჩენოთ.

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

00:01:25.077 --> 00:01:26.273
ეს შეგვიძლია გამოვიყენოთ

00:01:26.273 --> 00:01:28.525
თუ გვინდა ამოვიღოთ ელემენტი
სტანდარტული წყობიდან

00:01:28.525 --> 00:01:30.613
და ეკრანზე რომელიმე სხვა
ადგილას დავსვათ.

00:01:30.613 --> 00:01:31.664
ამისთვის

00:01:31.664 --> 00:01:32.945
შევცვალოთ relative მნიშვნელობა

00:01:32.945 --> 00:01:34.042
ჩავწეროთ absolute

00:01:34.042 --> 00:01:35.199
მაგრამ დავტოვოთ

00:01:35.199 --> 00:01:36.575
ზემოთა და მარცხენა თვისებები

00:01:36.575 --> 00:01:37.778
როგორც ხედავთ

00:01:37.778 --> 00:01:39.213
ახლა ჩვენი სურათი

00:01:39.213 --> 00:01:41.345
ფარავს როგორც სხვა სურათებს, 
ასევე ჰედერს.

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

00:01:42.772 --> 00:01:44.791
დავიწყოთ უინსტონით.

00:01:44.791 --> 00:01:48.456
დავამატოთ მისთვის წესი

00:01:48.456 --> 00:01:52.096
position: absolute

00:01:52.096 --> 00:01:54.302
და, დავუშვათ,

00:01:54.302 --> 00:01:56.110
ზემოდან 40 პიქსელი

00:01:56.110 --> 00:01:58.394
არა, 50 იყოს

00:01:58.394 --> 00:02:00.055
და 50 მარცხნივ

00:02:00.055 --> 00:02:02.204
აი, ახლა კარგია.

00:02:02.204 --> 00:02:04.302
ჰუპერსაც უნდა ზემოთ

00:02:04.302 --> 00:02:05.617
ამიტომ

00:02:05.617 --> 00:02:07.295
მასაც მივანიჭოთ

00:02:07.295 --> 00:02:11.661
position: absolute

00:02:11.661 --> 00:02:15.218
თვისებები: top: 30

00:02:15.218 --> 00:02:17.814
left:70

00:02:17.814 --> 00:02:19.613
ჩემი მიზანია

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

00:02:21.216 --> 00:02:23.743
უინსტონის ირგვლივ ცეკვავს.

00:02:23.743 --> 00:02:26.170
მაგრამ ჯერ–ჯერობით კომპოზიცია
ასე არ გამოიიყურება

00:02:26.170 --> 00:02:28.244
იმიტომ რომ უინსტონი

00:02:28.244 --> 00:02:30.358
ჰოპერის ზემოდან ხატია.

00:02:30.358 --> 00:02:31.948
ამის გამოსასწორებლად

NOTE Paragraph

00:02:31.948 --> 00:02:33.619
შემიძლია ან შევცვალო

00:02:33.619 --> 00:02:35.136
სურათების თეგების თანმიმდევრობა

00:02:35.136 --> 00:02:36.684
HTML-ში

00:02:36.684 --> 00:02:38.699
მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები

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

00:02:42.257 --> 00:02:43.939
შეგვიძლია ვუთხრათ ბრაუზერს

00:02:43.939 --> 00:02:44.856
რა თანმიმდევრობით

00:02:44.856 --> 00:02:46.035
უნდა ჩახატოს ელემენტები

00:02:46.035 --> 00:02:47.044
ამისთვის მათ სხვაობის

00:02:47.044 --> 00:02:48.247
ინდექსები უნდა მიანიჭოს.

00:02:48.247 --> 00:02:50.691
დავიწყოთ ლანდშაფტით.

00:02:50.691 --> 00:02:53.268
მისი z ინდექსი იქნება 1

00:02:53.268 --> 00:02:56.345
უინსტონის - 2

00:02:56.345 --> 00:02:59.054
ჰოპერის – 3

00:02:59.054 --> 00:03:00.081
კარგია!

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

00:03:02.641 --> 00:03:04.178
მოსწონს ეს თუ არა

00:03:04.178 --> 00:03:05.239
უწევს;

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

00:03:07.801 --> 00:03:09.991
ჰედერებსა და სვეტებს

00:03:09.991 --> 00:03:12.450
აბა..

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

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

00:03:16.886 --> 00:03:19.081
ამიტომ მივანიჭებ

00:03:19.081 --> 00:03:20.698
აბსოლურ პოზიციას

00:03:20.698 --> 00:03:21.757
და z ინდექს 4–ს

00:03:21.757 --> 00:03:22.997
კარგია.

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

00:03:25.252 --> 00:03:26.912
ან კიდევ ოდნავ მეტით

00:03:26.912 --> 00:03:28.518
აჰა, ასე კარგია.

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

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

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

00:03:32.816 --> 00:03:35.525
ამიტომ, მივანიჭოთ

00:03:35.525 --> 00:03:38.219
შედარებითი პოზიცია

00:03:38.219 --> 00:03:39.468
და დავაყენოთ ზედა ზღვარი

00:03:39.468 --> 00:03:40.679
რომელიც სურათის სიმაღლეს 


00:03:40.679 --> 00:03:42.574
უნდა უდრიდეს;

00:03:42.574 --> 00:03:45.119
რაც 220 პიქსელია

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

00:03:48.425 --> 00:03:50.129
მშვენიერი წვეულება

00:03:50.129 --> 00:03:52.179
მოგვიწყვია.

00:03:52.179 --> 00:03:53.822
ახლა თუ დააპაუზებთ ვიდეოს

00:03:53.822 --> 00:03:55.770
და ჩამოწევთ გვერდს

00:03:55.770 --> 00:03:58.051
დაინახავთ, რომ ყველაფერი


00:03:58.051 --> 00:03:59.209
ერთად მოძრაობს

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

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

00:04:02.836 --> 00:04:04.053
გვერის ზემოთა ზღვარზე

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

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

00:04:07.733 --> 00:04:10.550
ნელ–ნელა ქრება,

00:04:10.550 --> 00:04:11.919
იმიტომ რომ თქვენ შორდებით

00:04:11.919 --> 00:04:14.640
გვერდის ზემოთა ნაწილს

00:04:14.640 --> 00:04:15.807
მეორე ვარიანტია

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

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

00:04:18.765 --> 00:04:20.354
არაფერი არ მოძრაობს საერთოდ

00:04:20.354 --> 00:04:22.097
თუ გინდათ სცადოთ,

00:04:22.097 --> 00:04:23.051
უბრალოდ შეცვალეთ

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

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

00:04:29.073 --> 00:04:31.085
დაინახავთ, რომ

00:04:31.085 --> 00:04:33.678
ჩვენი წვეულება იმავე ადგილას რჩება

00:04:33.678 --> 00:04:35.667
იმიტომ რომ ახლა ის დამოკიდებულია

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

00:04:39.216 --> 00:04:40.852
ბრაუზერის ფანჯარაზე.

00:04:40.852 --> 00:04:43.917
აი, ასევ ისწავლეთ

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

00:04:45.941 --> 00:04:47.697
და შეგვიძლია ბევრი მაგარი რამის გაკეთება

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

00:04:48.519 --> 00:04:51.071
როდის ვიყენებთ აბსოლუტურ
და ფიქსირებულ პოზიციებს?

00:04:51.071 --> 00:04:53.109
ჰმ.. მაგალითად,

00:04:53.109 --> 00:04:54.183
თამაშის შექმნისას

00:04:54.183 --> 00:04:55.693
როგორც აქ გავაკეთე ეს

00:04:55.693 --> 00:04:57.219
როცა სცენის ყველა ნაწილის

00:04:57.219 --> 00:04:58.864
გამოჩენა გინდათ ბრაუზერში

00:04:58.864 --> 00:05:00.229
მაგრამ ასევე გამოიყენეთ

00:05:00.229 --> 00:05:01.634
ჩვეულებრივი ვებ–გვერდებისთვის

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

00:05:02.936 --> 00:05:04.913
იმ მოდულებისთვის, გვერდის შუაში
რომ ხტება

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

00:05:06.279 --> 00:05:07.380
ფიქსირებულს კი ვიყენებთ

00:05:07.380 --> 00:05:08.791
ძებნის ველისთვის ზოგ გვერდზე

00:05:08.791 --> 00:05:11.813
რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო
მისი გამოყენება

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

00:05:14.232 --> 00:05:15.431
ყოველ გვერდზე

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

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