1
00:00:00,000 --> 00:00:01,933
ახლა ჩვენ ვისწავლით, 
როგორ გამოვიყენოთ CSS

2
00:00:01,933 --> 00:00:03,843
ელემენტების გადაადგილებისთვის.

3
00:00:03,843 --> 00:00:06,004
არა უბრალოდ ერთმანეთის გვერდით
დასალაგებლად,

4
00:00:06,004 --> 00:00:07,537
არამედ ერთმანეთის მიყოლებით


5
00:00:07,537 --> 00:00:09,029
ერთი მეორეს შემდეგ დასაწყობად.

6
00:00:09,029 --> 00:00:11,611
აქ გვაქვს ვებ-გვერდი

7
00:00:11,611 --> 00:00:16,041
რამდენიმე სათაურითა და სურათებით და

8
00:00:16,041 --> 00:00:18,069
კიდევ გვაქვს რამდენიმე აბზაცი

9
00:00:18,069 --> 00:00:20,155
ეს ყველაფერი ახლა განლაგებულია

10
00:00:20,155 --> 00:00:22,177
სტანდარტული წყობის მიხედვით.

11
00:00:22,177 --> 00:00:24,212
რასაც ძირითადად იყენებს ბრაუზერი.

12
00:00:24,212 --> 00:00:26,959
ჩვენ მას სტატიკურ ან ჩვეულებრივ
განლაგებას ვუწოდებთ,

13
00:00:26,959 --> 00:00:29,388
რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,

14
00:00:29,388 --> 00:00:30,699
მაგალითად, სურათები,

15
00:00:30,699 --> 00:00:32,297
განლაგებულია მარცხნიდან მარჯვნივ

16
00:00:32,297 --> 00:00:33,800
ბლოკები კი, ისეთები, როგორც


17
00:00:33,800 --> 00:00:35,490
სათაურები(ჰედერები) და აბზაცები

18
00:00:35,490 --> 00:00:37,565
განლაგებულია ზემოდან ქვემოთ.

19
00:00:37,565 --> 00:00:39,915
შეგვიძლია, შევცვალოთ განლაგების სტრატეგია

20
00:00:39,915 --> 00:00:42,670
CSS-ის პოზიციონირების თვისების გამოყენებით

21
00:00:42,670 --> 00:00:45,621
მოდი ვცადოთ ეს ამ სურათის მაგალითზე.

22
00:00:45,621 --> 00:00:49,177
დავწეროთ: position:

23
00:00:49,177 --> 00:00:51,446
და შემდეგ მნიშვნელობად მივუთითოთ
relative

24
00:00:51,446 --> 00:00:53,406
relative განლაგების სტრატეგია

25
00:00:53,406 --> 00:00:55,407
ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ

26
00:00:55,407 --> 00:00:57,791
შემდეგ კი რაღაც მანძილით დავაშოროთ

27
00:00:57,791 --> 00:01:00,156
ახლა მივუთითოთ ბრაუზერს,


28
00:01:00,156 --> 00:01:01,501
რა მანძილით გვინდა დაშორება

29
00:01:01,501 --> 00:01:03,140
ამისთვის უნდა გამოვიყენოთ

30
00:01:03,140 --> 00:01:05,179
CSS-ის ოთხი ახალი
თვისების კომბინაცია

31
00:01:05,179 --> 00:01:07,425
ზედა, ქვედა, მარცხენა და მარჯვენა.

32
00:01:07,425 --> 00:01:09,441
მაგალითად, გვინდა დავაშოროთ

33
00:01:09,441 --> 00:01:13,575
ოცი პიქსელით ქვემოდან

34
00:01:13,626 --> 00:01:15,222
და კიდევ ათით...

35
00:01:15,222 --> 00:01:16,675
დავუშვათ, ათით მარცხნიდან.

36
00:01:16,675 --> 00:01:18,668
კარგია, არა?

37
00:01:18,668 --> 00:01:20,893
მაგრამ კიდევ უფრო მაგარი რამე

38
00:01:20,893 --> 00:01:23,472
შემიძლია გაჩენოთ.

39
00:01:23,472 --> 00:01:25,077
კერძოდ, აბსოლუტური განლაგება.

40
00:01:25,077 --> 00:01:26,273
ეს შეგვიძლია გამოვიყენოთ

41
00:01:26,273 --> 00:01:28,525
თუ გვინდა ამოვიღოთ ელემენტი
სტანდარტული წყობიდან

42
00:01:28,525 --> 00:01:30,613
და ეკრანზე რომელიმე სხვა
ადგილას დავსვათ.

43
00:01:30,613 --> 00:01:31,664
ამისთვის

44
00:01:31,664 --> 00:01:32,945
შევცვალოთ relative მნიშვნელობა

45
00:01:32,945 --> 00:01:34,042
ჩავწეროთ absolute

46
00:01:34,042 --> 00:01:35,199
მაგრამ დავტოვოთ

47
00:01:35,199 --> 00:01:36,575
ზემოთა და მარცხენა თვისებები

48
00:01:36,575 --> 00:01:37,778
როგორც ხედავთ

49
00:01:37,778 --> 00:01:39,213
ახლა ჩვენი სურათი

50
00:01:39,213 --> 00:01:41,345
ფარავს როგორც სხვა სურათებს, 
ასევე ჰედერს.

51
00:01:41,345 --> 00:01:42,772
ეს არ გვაწყობს, გამოვასწოროთ.

52
00:01:42,772 --> 00:01:44,791
დავიწყოთ უინსტონით.

53
00:01:44,791 --> 00:01:48,456
დავამატოთ მისთვის წესი

54
00:01:48,456 --> 00:01:52,096
position: absolute

55
00:01:52,096 --> 00:01:54,302
და, დავუშვათ,

56
00:01:54,302 --> 00:01:56,110
ზემოდან 40 პიქსელი

57
00:01:56,110 --> 00:01:58,394
არა, 50 იყოს

58
00:01:58,394 --> 00:02:00,055
და 50 მარცხნივ

59
00:02:00,055 --> 00:02:02,204
აი, ახლა კარგია.

60
00:02:02,204 --> 00:02:04,302
ჰუპერსაც უნდა ზემოთ

61
00:02:04,302 --> 00:02:05,617
ამიტომ

62
00:02:05,617 --> 00:02:07,295
მასაც მივანიჭოთ

63
00:02:07,295 --> 00:02:11,661
position: absolute

64
00:02:11,661 --> 00:02:15,218
თვისებები: top: 30

65
00:02:15,218 --> 00:02:17,814
left:70

66
00:02:17,814 --> 00:02:19,613
ჩემი მიზანია

67
00:02:19,613 --> 00:02:21,216
ჩანდეს ისე, თითქოს ჰუპერი

68
00:02:21,216 --> 00:02:23,743
უინსტონის ირგვლივ ცეკვავს.

69
00:02:23,743 --> 00:02:26,170
მაგრამ ჯერ–ჯერობით კომპოზიცია
ასე არ გამოიიყურება

70
00:02:26,170 --> 00:02:28,244
იმიტომ რომ უინსტონი

71
00:02:28,244 --> 00:02:30,358
ჰოპერის ზემოდან ხატია.

72
00:02:30,358 --> 00:02:31,948
ამის გამოსასწორებლად

73
00:02:31,948 --> 00:02:33,619
შემიძლია ან შევცვალო

74
00:02:33,619 --> 00:02:35,136
სურათების თეგების თანმიმდევრობა

75
00:02:35,136 --> 00:02:36,684
HTML-ში

76
00:02:36,684 --> 00:02:38,699
მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები

77
00:02:38,699 --> 00:02:42,257
CSS–ის z ინდექსის გამოყენებით

78
00:02:42,257 --> 00:02:43,939
შეგვიძლია ვუთხრათ ბრაუზერს

79
00:02:43,939 --> 00:02:44,856
რა თანმიმდევრობით

80
00:02:44,856 --> 00:02:46,035
უნდა ჩახატოს ელემენტები

81
00:02:46,035 --> 00:02:47,044
ამისთვის მათ სხვაობის

82
00:02:47,044 --> 00:02:48,247
ინდექსები უნდა მიანიჭოს.

83
00:02:48,247 --> 00:02:50,691
დავიწყოთ ლანდშაფტით.

84
00:02:50,691 --> 00:02:53,268
მისი z ინდექსი იქნება 1

85
00:02:53,268 --> 00:02:56,345
უინსტონის - 2

86
00:02:56,345 --> 00:02:59,054
ჰოპერის – 3

87
00:02:59,054 --> 00:03:00,081
კარგია!

88
00:03:00,081 --> 00:03:02,641
ახლა ჰოპერი უინსტონის წინ ცეკვავს

89
00:03:02,641 --> 00:03:04,178
მოსწონს ეს თუ არა

90
00:03:04,178 --> 00:03:05,239
უწევს;

91
00:03:05,239 --> 00:03:07,801
ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ

92
00:03:07,801 --> 00:03:09,991
ჰედერებსა და სვეტებს

93
00:03:09,991 --> 00:03:12,450
აბა..

94
00:03:12,450 --> 00:03:13,942
მინდა, რომ ეს ცეკვა

95
00:03:13,942 --> 00:03:16,886
ყველაფერზე მაღლა იყოს განლაგებული

96
00:03:16,886 --> 00:03:19,081
ამიტომ მივანიჭებ

97
00:03:19,081 --> 00:03:20,698
აბსოლურ პოზიციას

98
00:03:20,698 --> 00:03:21,757
და z ინდექს 4–ს

99
00:03:21,757 --> 00:03:22,997
კარგია.

100
00:03:22,997 --> 00:03:25,251
ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ

101
00:03:25,252 --> 00:03:26,912
ან კიდევ ოდნავ მეტით

102
00:03:26,912 --> 00:03:28,518
აჰა, ასე კარგია.

103
00:03:28,518 --> 00:03:29,688
ახლა სიმღერის ტექსტს მივადგეთ.

104
00:03:29,688 --> 00:03:31,113
მინდა, რომ ის ყველაფრის

105
00:03:31,113 --> 00:03:32,816
ქვემოთ ჩანდეს უბრალოდ.

106
00:03:32,816 --> 00:03:35,525
ამიტომ, მივანიჭოთ

107
00:03:35,525 --> 00:03:38,219
შედარებითი პოზიცია

108
00:03:38,219 --> 00:03:39,468
და დავაყენოთ ზედა ზღვარი

109
00:03:39,468 --> 00:03:40,679
რომელიც სურათის სიმაღლეს 


110
00:03:40,679 --> 00:03:42,574
უნდა უდრიდეს;

111
00:03:42,574 --> 00:03:45,119
რაც 220 პიქსელია

112
00:03:45,119 --> 00:03:48,425
მშვენიერია, მომწონს, როგორც გამოვიდა

113
00:03:48,425 --> 00:03:50,129
მშვენიერი წვეულება

114
00:03:50,129 --> 00:03:52,179
მოგვიწყვია.

115
00:03:52,179 --> 00:03:53,822
ახლა თუ დააპაუზებთ ვიდეოს

116
00:03:53,822 --> 00:03:55,770
და ჩამოწევთ გვერდს

117
00:03:55,770 --> 00:03:58,051
დაინახავთ, რომ ყველაფერი


118
00:03:58,051 --> 00:03:59,209
ერთად მოძრაობს

119
00:03:59,209 --> 00:04:00,989
მნიშვნელოვანი კი ის არის,

120
00:04:00,989 --> 00:04:02,836
რომ აბსოლუტური პოზიცია დამოკიდებულია

121
00:04:02,836 --> 00:04:04,053
გვერის ზემოთა ზღვარზე

122
00:04:04,053 --> 00:04:06,017
ამიტომ, როცა გვერდს სქროლავთ

123
00:04:06,040 --> 00:04:07,733
ყველაფერი, რაც ზემოთ იყო

124
00:04:07,733 --> 00:04:10,550
ნელ–ნელა ქრება,

125
00:04:10,550 --> 00:04:11,919
იმიტომ რომ თქვენ შორდებით

126
00:04:11,919 --> 00:04:14,640
გვერდის ზემოთა ნაწილს

127
00:04:14,640 --> 00:04:15,807
მეორე ვარიანტია

128
00:04:15,807 --> 00:04:17,109
ფიქსირებული პოზიცია,

129
00:04:17,109 --> 00:04:18,765
ამ შემთხვევაში გამოჩნდება თითქოს

130
00:04:18,765 --> 00:04:20,354
არაფერი არ მოძრაობს საერთოდ

131
00:04:20,354 --> 00:04:22,097
თუ გინდათ სცადოთ,

132
00:04:22,097 --> 00:04:23,051
უბრალოდ შეცვალეთ

133
00:04:23,051 --> 00:04:25,693
h1 აბსოლუტურიდან ფიქსირებულზე

134
00:04:25,693 --> 00:04:29,073
მერე კი დააპაუზეთ და ჩამოსქროლეთ

135
00:04:29,073 --> 00:04:31,085
დაინახავთ, რომ

136
00:04:31,085 --> 00:04:33,678
ჩვენი წვეულება იმავე ადგილას რჩება

137
00:04:33,678 --> 00:04:35,667
იმიტომ რომ ახლა ის დამოკიდებულია

138
00:04:35,667 --> 00:04:39,216
ეკრანის ზედა ზღვარზე,

139
00:04:39,216 --> 00:04:40,852
ბრაუზერის ფანჯარაზე.

140
00:04:40,852 --> 00:04:43,917
აი, ასევ ისწავლეთ

141
00:04:43,917 --> 00:04:45,941
სამი სხვადასხვა პოზიციის გამოყენება.

142
00:04:45,941 --> 00:04:47,697
და შეგვიძლია ბევრი მაგარი რამის გაკეთება

143
00:04:47,697 --> 00:04:48,519
შეიძლება გაინტერესებთ,

144
00:04:48,519 --> 00:04:51,071
როდის ვიყენებთ აბსოლუტურ
და ფიქსირებულ პოზიციებს?

145
00:04:51,071 --> 00:04:53,109
ჰმ.. მაგალითად,

146
00:04:53,109 --> 00:04:54,183
თამაშის შექმნისას

147
00:04:54,183 --> 00:04:55,693
როგორც აქ გავაკეთე ეს

148
00:04:55,693 --> 00:04:57,219
როცა სცენის ყველა ნაწილის

149
00:04:57,219 --> 00:04:58,864
გამოჩენა გინდათ ბრაუზერში

150
00:04:58,864 --> 00:05:00,229
მაგრამ ასევე გამოიყენეთ

151
00:05:00,229 --> 00:05:01,634
ჩვეულებრივი ვებ–გვერდებისთვის

152
00:05:01,634 --> 00:05:02,936
მაგალითად, ხანის აკადემიაზე

153
00:05:02,936 --> 00:05:04,913
იმ მოდულებისთვის, გვერდის შუაში
რომ ხტება

154
00:05:04,913 --> 00:05:06,279
აბსოლუტურ პოზიციას ვიყენებთ.

155
00:05:06,279 --> 00:05:07,380
ფიქსირებულს კი ვიყენებთ

156
00:05:07,380 --> 00:05:08,791
ძებნის ველისთვის ზოგ გვერდზე

157
00:05:08,791 --> 00:05:11,813
რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო
მისი გამოყენება

158
00:05:11,813 --> 00:05:14,232
პოზიციები შეიძლება არ გამოიყენო

159
00:05:14,232 --> 00:05:15,431
ყოველ გვერდზე

160
00:05:15,431 --> 00:05:16,704
მაგრამ როცა გამოიყენებ,

161
00:05:16,704 --> 00:05:18,967
ძალიან გაგიხარდება მათი არსებობა.