Articles
Panimula sa CSS
Layout-related na mga Katangian ng CSS

Layout-related na mga Katangian ng CSS

Ipinaliliwanag ng artikulong ito ang mga katangian ng CSS na kaugnay sa layout.

Maaaring matutunan dito kung paano gamitin at isulat ang mga katangiang display at position.

YouTube Video

HTML para sa Preview

css-layout.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-layout.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>display: block</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.block-element {
 27    display: block;
 28    width: 400px;
 29    background-color: lightblue;
 30    padding: 10px;
 31    margin-bottom: 10px;
 32}
 33</pre>
 34                <header><h4>HTML</h4></header>
 35                <pre>&lt;div class="block-element"&gt;This is a block element.&lt;/div&gt;</pre>
 36                <header><h4>HTML+CSS</h4></header>
 37                <section class="sample-view">
 38                    <div class="block-element">This is a block element.</div>
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>display: inline</h3>
 44            <section>
 45                <header><h4>CSS</h4></header>
 46<pre class="sample">
 47span.inline-element {
 48    background-color: lightgray;
 49    padding: 10px;
 50}
 51
 52div.inline-element {
 53    display: inline;
 54    background-color: lightblue;
 55    padding: 10px;
 56}
 57</pre>
 58                <header><h4>HTML</h4></header>
 59<pre>
 60&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 61&lt;div class="inline-element"&gt;div tag with "display: inline"&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <span class="inline-element">This is an inline element.</span>
 66                    <div class="inline-element">div tag with "display: inline"</div>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>display: inline-block</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.inline-block-element {
 76    display: inline-block;
 77    width: 200px;
 78    background-color: lightblue;
 79    padding: 10px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 85&lt;div class="inline-block-element"&gt;This is an inline-block element.&lt;/div&gt;
 86&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <span class="inline-element">This is an inline element.</span>
 91                    <div class="inline-block-element">This is an inline-block element.</div>
 92                    <span class="inline-element">Another inline element.</span>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>display: none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102    display: none;
103    background-color: lightblue;
104    padding: 10px;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108                <pre>&lt;div class="none-element"&gt;This is a none element.&lt;/div&gt;</pre>
109                <header><h4>HTML+CSS</h4></header>
110                <section class="sample-view">
111                    <div class="none-element">This is a none element.</div>
112                </section>
113            </section>
114        </article>
115        <article>
116            <h3>display: flex</h3>
117            <section>
118                <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121    display: flex;
122    justify-content: space-between;
123    background-color: lightgray;
124    padding: 10px;
125}
126
127.flex-container div {
128    width: 120px;
129    background-color: lightblue;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class="flex-container"&gt;
135    &lt;div&gt;Item 1&lt;/div&gt;
136    &lt;div&gt;Item 2&lt;/div&gt;
137&lt;/div&gt;
138</pre>
139                <header><h4>HTML+CSS</h4></header>
140                <section class="sample-view">
141                    <div class="flex-container">
142                        <div>Flex item 1</div>
143                        <div>Flex item 2</div>
144                    </div>
145                </section>
146            </section>
147        </article>
148        <article>
149            <h3>display: inline-flex</h3>
150            <section>
151                <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154    display: inline-flex;
155    width: 250px;
156    justify-content: space-between;
157    background-color: lightgray;
158    padding: 10px;
159}
160
161.inline-flex-container div {
162    width: 100px;
163    background-color: lightblue;
164}
165</pre>
166                <header><h4>HTML</h4></header>
167<pre>
168&lt;span class="inline-element"&gt;Inline element&lt;/span&gt;
169&lt;div class="inline-flex-container"&gt;
170    &lt;div&gt;Inline Flex item 1&lt;/div&gt;
171    &lt;div&gt;Inline Flex item 2&lt;/div&gt;
172&lt;/div&gt;
173</pre>
174                <header><h4>HTML+CSS</h4></header>
175                <section class="sample-view">
176                    <span class="inline-element">Inline element</span>
177                    <div class="inline-flex-container">
178                        <div>Inline Flex item 1</div>
179                        <div>Inline Flex item 2</div>
180                    </div>
181                </section>
182            </section>
183        </article>
184        <article>
185            <h3>display: grid</h3>
186            <section>
187                <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190    display: grid;
191    grid-template-columns: repeat(2, 1fr);
192    gap: 10px;
193    background-color: #f3f3f3;
194    padding: 10px;
195    height: 200px;
196}
197.grid-container div {
198    background-color: lightblue;
199    border: 1px solid #aaa;
200    padding: 5px;
201    text-align: center;
202    width: 100px;
203}
204</pre>
205                <header><h4>HTML</h4></header>
206<pre>
207&lt;div class="grid-container"&gt;
208    &lt;div&gt;Item 1&lt;/div&gt;
209    &lt;div&gt;Item 2&lt;/div&gt;
210    &lt;div&gt;Item 3&lt;/div&gt;
211    &lt;div&gt;Item 4&lt;/div&gt;
212&lt;/div&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <div class="grid-container">
217                        <div>Item 1</div>
218                        <div>Item 2</div>
219                        <div>Item 3</div>
220                        <div>Item 4</div>
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>display: inline-grid</h3>
227            <section>
228                <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231    display: inline-grid;
232    grid-template-columns: 1fr 1fr;
233    gap: 5px;
234    background-color: lightblue;
235    padding: 5px;
236    width: 200px;
237    height: 150px;
238}
239.inline-grid-element div {
240    background-color: lightskyblue;
241    padding: 5px;
242    text-align: center;
243    border: 1px solid #ccc;
244    width: 80px;
245    height: 25px;
246}
247</pre>
248                <header><h4>HTML</h4></header>
249<pre>
250&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
251&lt;div class="inline-grid-element"&gt;
252    &lt;div&gt;Item 1&lt;/div&gt;
253    &lt;div&gt;Item 2&lt;/div&gt;
254    &lt;div&gt;Item 3&lt;/div&gt;
255    &lt;div&gt;Item 4&lt;/div&gt;
256&lt;/div&gt;
257&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
258</pre>
259                <header><h4>HTML+CSS</h4></header>
260                <section class="sample-view">
261                    <span class="inline-element">This is an inline element.</span>
262                    <div class="inline-grid-element">
263                        <div>Item 1</div>
264                        <div>Item 2</div>
265                        <div>Item 3</div>
266                        <div>Item 4</div>
267                    </div>
268                    <span class="inline-element">Another inline element.</span>
269                </section>
270            </section>
271        </article>
272        <article>
273            <h3>display: table</h3>
274            <section>
275                <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278    display: table;
279    border-collapse: collapse;
280    width: 100%;
281    height: 100%;
282}
283
284.table-row {
285    display: table-row;
286}
287
288.table-cell {
289    display: table-cell;
290    border: 1px solid #999;
291    padding: 8px;
292    text-align: center;
293    vertical-align: middle;
294    background-color: lightblue;
295}
296
297.header-row .table-cell {
298    font-weight: bold;
299    background-color: lightskyblue;
300}
301</pre>
302                <header><h4>HTML</h4></header>
303<pre>
304&lt;section&gt;
305    &lt;div class="table-container"&gt;
306        &lt;div class="table-row header-row"&gt;
307            &lt;div class="table-cell"&gt;Header 1&lt;/div&gt;
308            &lt;div class="table-cell"&gt;Header 2&lt;/div&gt;
309        &lt;/div&gt;
310        &lt;div class="table-row"&gt;
311            &lt;div class="table-cell"&gt;Row 1, Cell 1&lt;/div&gt;
312            &lt;div class="table-cell"&gt;Row 1, Cell 2&lt;/div&gt;
313        &lt;/div&gt;
314        &lt;div class="table-row"&gt;
315            &lt;div class="table-cell"&gt;Row 2, Cell 1&lt;/div&gt;
316            &lt;div class="table-cell"&gt;Row 2, Cell 2&lt;/div&gt;
317        &lt;/div&gt;
318    &lt;/div&gt;
319&lt;/section&gt;
320</pre>
321                <header><h4>HTML+CSS</h4></header>
322                <section class="sample-view">
323                    <div class="table-container">
324                        <div class="table-row header-row">
325                            <div class="table-cell">Header 1</div>
326                            <div class="table-cell">Header 2</div>
327                        </div>
328                        <div class="table-row">
329                            <div class="table-cell">Row 1, Cell 1</div>
330                            <div class="table-cell">Row 1, Cell 2</div>
331                        </div>
332                        <div class="table-row">
333                            <div class="table-cell">Row 2, Cell 1</div>
334                            <div class="table-cell">Row 2, Cell 2</div>
335                        </div>
336                    </div>
337                </section>
338            </section>
339        </article>
340        <article>
341            <h3>display: list-item</h3>
342            <section>
343                <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346    display: list-item;
347    list-style-position: inside;
348    list-style-type: disc;
349    margin-left: 20px;
350    background-color: lightblue;
351    padding: 10px;
352    height: min-content;
353}
354</pre>
355                <header><h4>HTML</h4></header>
356<pre>
357&lt;div class="list-item-element"&gt;This is a list item element.&lt;/div&gt;
358&lt;div class="list-item-element"&gt;Another list item element.&lt;/div&gt;
359&lt;div class="list-item-element"&gt;Yet another list item element.&lt;/div&gt;
360</pre>
361                <header><h4>HTML+CSS</h4></header>
362                <section class="sample-view">
363                    <div class="list-item-element">This is a list item element.</div>
364                    <div class="list-item-element">Another list item element.</div>
365                    <div class="list-item-element">Yet another list item element.</div>
366                </section>
367            </section>
368        </article>
369        <article>
370            <h3>position</h3>
371            <section style="height: auto;">
372                <header><h4>position: static</h4></header>
373                <section class="sample-view">
374                    <div class="static-element">This is a static element.</div>
375                </section>
376                <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377                <section class="sample-view">
378                    <div class="relative-element">This is a relative element.</div>
379                </section>
380                <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381                <section class="sample-view">
382                    <div class="absolute-container">
383                        <div class="absolute-element">This is an absolute element.</div>
384                    </div>
385                </section>
386                <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387                <section class="sample-view">
388                    <div class="fixed-element">This is a fixed element.</div>
389                </section>
390                <header><h4>position: sticky; top: 0;</h4></header>
391                <section class="sample-view">
392                    <div class="sticky-container">
393                        <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394                        <div class="sticky-element">This is a sticky element. Scroll down!</div>
395                    </div>
396                </section>
397            </section>
398        </article>
399    </main>
400</body>
401</html>

{^ i18n　配置・レイアウト ^}

display na katangian

Ang katangiang display ay isang CSS property na tumutukoy kung paano ipapakita ang elemento. Tinutukoy nito kung anong format ang gagamitin sa pag-render ng elemento, tulad ng block, inline, flex, grid, o hidden.

Mga halaga ng katangiang display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Kapag pinili ang block, ang elemento ay ipinapakita bilang isang block-level na elemento.
  • Ang mga block na elemento ay ipinapakita sa isang bagong linya sa loob ng pahina, itinutulak ang ibang mga elemento sa susunod na linya.
  • Kabilang sa mga karaniwang block na elemento ang <div>, <p>, <h1>, <section>, <article>, at iba pa.
inline 
 1span.inline-element {
 2    background-color: lightgray;
 3    padding: 10px;
 4}
 5
 6div.inline-element {
 7    display: inline;
 8    background-color: lightblue;
 9    padding: 10px;
10}
  • Kapag pinili ang inline, ang elemento ay ipinapakita bilang isang inline na elemento.
  • Ang mga inline na elemento ay ipinapakita sa parehong linya ng mga karatig na elemento at nakahanay nang pahalang.
  • Kabilang sa mga karaniwang inline na elemento ang <span>, <a>, <strong>, at iba pa.
  • Ang mga inline na elemento ay inilalagay sa parehong linya ng ibang inline na elemento at ipinapakita nang tuloy-tuloy na pahalang, hindi tulad ng block na mga elemento.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Kapag pinili ang inline-block, ang elemento ay ipinapakita bilang isang inline na elemento, ngunit may mga katangian din ng block na elemento.
  • Ang mga inline-block na elemento ay ipinapakita sa parehong linya ng ibang inline na elemento, ngunit maaari mong itakda ang taas at lapad tulad ng block na mga elemento.
  • Ang mga elementong <img>, <button>, at <canvas> ay kumikilos na parang inline-block bilang default.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Kapag pinili ang none, ang elemento ay hindi ipinapakita.
  • Ang elemento ay nagiging ganap na hindi nakikita at inaalis mula sa screen at layout.
flex 
 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    background-color: lightgray;
 5    padding: 10px;
 6}
 7
 8.flex-container div {
 9    width: 120px;
10    background-color: lightblue;
11}
  • Kapag pinili ang flex, ang elemento ay ipinapakita bilang isang flexbox container.
  • Ginagamit ito upang maayos nang flexible ang mga child na elemento (mga flex item).
  • Sa paggamit ng flexbox, maaaring maipakita ang mga child na elemento bilang inline, at awtomatikong inaayos ang mga margin at pagkakahanay.
inline-flex 
 1.inline-flex-container {
 2    display: inline-flex;
 3    width: 250px;
 4    justify-content: space-between;
 5    background-color: lightgray;
 6    padding: 10px;
 7}
 8
 9.inline-flex-container div {
10    width: 100px;
11    background-color: lightblue;
12}
  • Ang pagtukoy ng inline-flex ay nagpapakita ng elemento bilang isang inline na flexbox container.
  • Habang may mga katangian ng flexbox, ito ay itinuturing na parang isang inline na elemento at ipinapakita sa parehong linya ng ibang mga elemento.
grid 
 1.grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(2, 1fr);
 4    gap: 10px;
 5    background-color: #f3f3f3;
 6    padding: 10px;
 7    height: 200px;
 8}
 9
10.grid-container div {
11    background-color: lightblue;
12    border: 1px solid #aaa;
13    padding: 5px;
14    text-align: center;
15    width: 100px;
16}
  • Ang pagtukoy ng grid ay nagpapakita ng elemento bilang isang grid container.
  • Ang grid layout ay maaaring gamitin upang ihanay ang mga child na elemento sa mga hanay at kolum.
  • Ang mga child element sa loob ng grid container ay maayos na nakaayos sa mga kolum at hanay.
inline-grid 
 1.inline-grid-element {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6    padding: 5px;
 7    width: 200px;
 8    height: 150px;
 9}
10.inline-grid-element div {
11    background-color: lightskyblue;
12    padding: 5px;
13    text-align: center;
14    border: 1px solid #ccc;
15    width: 80px;
16    height: 25px;
17}
  • Ang pagtukoy ng inline-grid ay nagpapakita ng elemento bilang isang inline na grid container.
  • Ginagamit nito ang grid layout system at itinuturing na parang isang inline na elemento.
table 
 1.table-container {
 2    display: table;
 3    border-collapse: collapse;
 4    width: 100%;
 5    height: 100%;
 6}
 7
 8.table-row {
 9    display: table-row;
10}
11
12.table-cell {
13    display: table-cell;
14    border: 1px solid #999;
15    padding: 8px;
16    text-align: center;
17    vertical-align: middle;
18    background-color: lightblue;
19}
20
21.header-row .table-cell {
22    font-weight: bold;
23    background-color: lightskyblue;
24}
  • Ang pagtukoy ng table ay nagpapakita ng elemento bilang isang table. Mayroon itong layout na katulad ng HTML <table>, at ang mga child na elemento nito ay itinuturing bilang mga table cell.
  • Tulad ng sa halimbawang ito, itakda ang property na display ng mga child element sa table-row o table-cell.
    • Kapag tinukoy ang table-row, ang elemento ay kumikilos tulad ng isang hilera sa talahanayan (<tr>).
    • Kapag tinukoy ang table-cell, ang elemento ay kumikilos tulad ng isang cell sa talahanayan (<td>).
list-item 
1.list-item-element {
2    display: list-item;
3    list-style-position: inside;
4    list-style-type: disc;
5    margin-left: 20px;
6    background-color: lightblue;
7    padding: 10px;
8    height: min-content;
9}
  • Ang pagtukoy ng list-item ay nagpapakita ng elemento bilang isang listahan. Ito ay ginagamit sa mga <li> na elemento na karaniwang makikita sa <ul> o <ol>.

Ari-arian ng position 

 1.static-element {
 2    position: static;
 3    background-color: lightblue;
 4    padding: 10px;
 5    margin-bottom: 20px;
 6}
 7
 8.relative-element {
 9    position: relative;
10    background-color: lightblue;
11    top: 10px;
12    left: 20px;
13    padding: 10px;
14    margin-bottom: 20px;
15}
16
17.absolute-container {
18    position: relative;
19    width: 500px;
20    height: 150px;
21    background-color: lightgray;
22    margin-bottom: 20px;
23}
24
25.absolute-element {
26    position: absolute;
27    top: 10px;
28    left: 20px;
29    background-color: lightblue;
30    padding: 10px;
31}
32
33.fixed-element {
34    position: fixed;
35    bottom: 10px;
36    right: 10px;
37    background-color: lightblue;
38    padding: 10px;
39}
40
41.sticky-container {
42    overflow: scroll;
43    height: 150px;
44    width: 500px;
45}
46
47.sticky-element {
48    position: sticky;
49    top: 0;
50    background-color: lightblue;
51    padding: 10px;
52}

Ang position ay isang ari-arian na kumokontrol kung paano iaayos ang mga elemento sa CSS. Ang ari-arian na ito ay maaaring gamitin upang iposisyon ang mga elemento na relative o absolute sa kanilang parent o iba pang mga elemento, o upang ilagay ang mga ito sa tiyak na lugar.

Mga halaga ng ari-arian na position

static 
1.static-element {
2    position: static;
3}
  • Sa klase na static-element, ang position ay itinakda bilang static. Ang elemento ay ipinosisyon sa normal na daloy.
  • static ang default na halaga. Kung hindi tinukoy ang position, ang static ang ginagamit.
  • Ang elemento ay ipino-posisyon ayon sa normal na daloy ng dokumento. Ang mga ari-arian na top, right, bottom, left ay hindi maaaring gamitin.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Sa klase na relative-element, ang position ay itinakda bilang relative. Ang elemento ay gumagalaw na relative sa normal na posisyon nito. Sa halimbawang ito, ito ay ipinosisyon ng 10px pababa at 20px pakanan.
  • Ang pagtukoy ng relative ay nagpaposisyon sa elemento ng kamag-anak. Ang elemento ay gagalaw mula sa orihinal nitong posisyon patungo sa posisyong tinukoy ng mga ari-ariang top, right, bottom, left, na sinusundan ang normal na daloy ng dokumento.
  • Ang isang elementong naka-set sa relative na pagpo-posisyon ay nag-iiwan ng espasyo sa orihinal nitong posisyon kahit na ito ay lumipat na.
  • Sa halimbawang ito, ang elemento ay gumagalaw ng 10 na pixel pababa at 20 na pixel pakanan mula sa orihinal nitong posisyon, ngunit ang daloy ng dokumento ay pinoproseso batay sa orihinal nitong posisyon.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Sa klase na absolute-element, ang position ay itinakda bilang absolute. Sa halimbawang ito, ang elemento ay nakapwesto 10 pixels pababa at 20 pixels pakanan mula sa kaliwang-taas na sulok ng kanyang magulang (o ng viewport).
  • Kapag tinukoy ang absolute, ang elemento ay nakapwesto nang ganap na relative sa kanyang magulang. Kung ang position ng parent element ay naka-set sa relative, absolute, o fixed, ang elemento ay gumagalaw batay sa parent na iyon gamit ang mga ari-ariang top, right, bottom, left. Kung walang natagpuang parent element, ito ay ipoposisyon nang kaugnay sa buong pahina (viewport).
  • Ang isang elementong naka-set sa absolute na pagpo-posisyon ay aalisin mula sa normal na daloy ng dokumento at hindi makakaapekto sa ibang mga elemento.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Sa klase na fixed-element, ang position ay itinakda bilang fixed. Ang pagtukoy ng fixed ay nagpo-posisyon sa elemento sa isang nakatakdang lokasyon. Ang elemento ay inilalagay nang tiyak sa viewport at hindi gumagalaw kapag nag-s-scroll.
  • Halimbawa, ginagamit ito upang panatilihing nakikita ang page header o navigation bar.
  • Sa halimbawang ito, ang elemento ay nakadikit sa ibabang-kanang sulok ng screen at nananatili roon kahit na ini-scroll ang pahina.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Sa klase na sticky-element, ang position ay nakatakda bilang sticky.
  • Kapag ang sticky ay tinukoy, ang elemento ay dinamiko ang pagpo-posisyon batay sa pag-scroll. Sinusunod nito ang normal na daloy ng dokumento, ngunit kapag ang pahina ay i-scroll, ang elemento ay "dumidikit" sa isang tiyak na posisyon batay sa tinukoy na mga halaga ng top, right, bottom, at left.
  • Ang sticky ay kumikilos tulad ng isang fixed na elemento sa loob ng isang tiyak na saklaw.
  • Sa halimbawang ito, ang elemento ay ipinapakita sa normal nitong posisyon, ngunit kapag ang pahina ay na-scroll sa tinukoy na posisyon ng top, ito ay dumidikit doon at sinusunod ang pag-scroll.

Mga ari-arian na top, left, bottom, right

Top, left, bottom, at right ay mga ari-arian para sa pagkontrol ng posisyon ng mga elemento sa CSS. Ang mga ari-arian na ito ay ginagamit kasabay ng position property upang tukuyin kung gaano kalayo ililipat ang isang elemento sa isang tinukoy na direksyon base sa posisyon nito.

Gayunpaman, ang mga ari-arian na ito ay gumagana lamang kapag ang position ay nakaset sa relative, absolute, fixed, o sticky. Sa default na static value, ang mga ari-arian na ito ay walang epekto.

Paano gamitin ang top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Ang top property ay tumutukoy kung gaano kalayo dapat ang isang elemento mula sa itaas.
    • Sa halimbawa na ito, ang elemento ay gumagalaw ng 20px pababa mula sa karaniwang posisyon nito.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Ang left property ay tumutukoy kung gaano kalayo dapat ang isang elemento mula sa kaliwa.
    • Sa halimbawa na ito, ang elemento ay gumagalaw ng 50px pakanan mula sa kaliwa.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Ang bottom property ay tumutukoy kung gaano kalayo dapat ang isang elemento mula sa ibaba.
    • Sa halimbawa na ito, ang elemento ay nakakabit 10px sa itaas ng ibabang bahagi ng screen. Mananatili ito sa posisyon na iyon kahit may pag-scroll.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Ang right property ay tumutukoy kung gaano kalayo dapat ang isang elemento mula sa kanan.
    • Sa halimbawa na ito, habang nag-i-scroll, ang elemento ay gumagalaw ng 20px pakaliwa mula sa kanan at mananatili sa posisyon na iyon.

Relasyon sa position property

  • Relative: Inililipat ang elemento base sa tinukoy na mga halaga ng top, left, bottom, right mula sa karaniwang posisyon nito.
  • Absolute: Inililipat ang elemento sa tinukoy na lokasyon ng top, left, bottom, right base sa pinakamalapit na tagapagmana na may position na nakaset sa relative, absolute, o fixed.
  • Fixed: Inaayos ang elemento sa tinukoy na posisyon base sa viewport (ang buong screen). Mananatili ito sa posisyon na iyon kahit may pag-scroll.
  • Sticky: Mananatili ang elemento sa karaniwang posisyon nito hanggang umabot ito sa tinukoy na posisyon habang nag-i-scroll, kung saan ito "didikit" sa posisyon na iyon.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga property ng CSS na may kaugnayan sa talahanayanMga katangian ng CSS na may kaugnayan sa Flexbox