Articles
CSS'e Giriş
Düzenle ilgili CSS Özellikleri

Düzenle ilgili CSS Özellikleri

Bu makale, düzenle ilgili CSS özelliklerini açıklar.

display ve position özelliklerinin nasıl kullanılacağını ve yazılacağını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

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 özelliği

display özelliği, bir öğenin nasıl görüntüleneceğini tanımlayan bir CSS özelliğidir. Bu özellik, öğenin blok, satır içi, esnek (flex), ızgara (grid) veya gizli gibi hangi formatta görüntüleneceğini belirler.

display özelliği değerleri

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • block olarak belirtildiğinde, öğe blok seviyesinde görüntülenir.
  • Blok öğeleri sayfa içinde yeni bir satırda görüntülenir ve diğer öğeleri bir sonraki satıra yerleştirir.
  • Tipik blok öğeleri arasında <div>, <p>, <h1>, <section>, <article> gibi öğeler bulunur.
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}
  • inline olarak belirtildiğinde, öğe satır içi bir öğe olarak görüntülenir.
  • Satır içi öğeler, komşu öğelerle aynı satırda görüntülenir ve yatay olarak hizalanır.
  • Tipik satır içi öğeler arasında <span>, <a>, <strong> gibi öğeler bulunur.
  • Satır içi öğeler, diğer satır içi öğelerle aynı satıra yerleştirilir ve blok öğelerden farklı olarak, yatayda sürekli görüntülenir.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • inline-block olarak belirtildiğinde, öğe satır içi bir öğe olarak görüntülenir ancak blok öğe özelliklerine de sahiptir.
  • Satır içi blok öğeleri, diğer satır içi öğelerle aynı satırda görüntülenir, ancak blok öğelerde olduğu gibi yükseklik ve genişlik ayarlanabilir.
  • <img>, <button> ve <canvas> öğeleri varsayılan olarak inline-block gibi davranır.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • none olarak belirtildiğinde, öğe görüntülenmez.
  • Öğe tamamen görünmez olur ve hem ekrandan hem de düzenleme alanından çıkarılır.
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}
  • flex olarak belirtildiğinde, öğe bir flexbox (esnek kutu) konteyneri olarak görüntülenir.
  • Bu, alt öğeleri (flex ögeleri) esnek bir şekilde düzenlemek ve hizalamak için kullanılır.
  • Flexbox kullanımı, alt öğelerin satır içinde görüntülenmesine, kenar boşluklarının ve hizalamanın otomatik olarak ayarlanmasına olanak tanır.
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}
  • inline-flex belirlemek, elementi bir satır içi esnek kutu konteyneri olarak görüntüler.
  • Esnek kutu özelliklerini taşımasına rağmen, satır içi bir öğe gibi işlem görür ve diğer öğelerle aynı satırda görüntülenir.
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}
  • grid belirlemek, elementi bir ızgara konteyneri olarak görüntüler.
  • Bir ızgara düzeni, çocuk öğeleri satır ve sütunlar halinde hizalamak için uygulanabilir.
  • Izgara konteynerindeki alt öğeler sütunlar ve satırlar boyunca düzgün bir şekilde düzenlenir.
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}
  • inline-grid belirlemek, elementi bir satır içi ızgara konteyneri olarak görüntüler.
  • Izgara düzeni sistemini kullanır ve bir satır içi öğe gibi işlem görür.
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}
  • table belirlemek, elementi bir tablo olarak görüntüler. HTML <table> benzeri bir düzeni vardır ve alt öğeleri tablo hücreleri olarak işlenir.
  • Bu örnekte olduğu gibi, alt öğelerin display özelliğini table-row veya table-cell olarak ayarlayın.
    • table-row belirtildiğinde, öğe bir tablo satırı (<tr>) gibi davranır.
    • table-cell belirtildiğinde, öğe bir tablo hücresi (<td>) gibi davranır.
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}
  • list-item belirlemek, elementi bir liste öğesi olarak görüntüler. Genellikle <ul> veya <ol> içinde kullanılan <li> öğelerine uygulanır.

position özelliği 

 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}

position, öğelerin CSS'te nasıl konumlandırıldığını kontrol eden bir özelliktir. Bu özellik, öğeleri ana veya diğer öğelere göre göreceli veya mutlak olarak konumlandırmak ya da sabitlemek için kullanılabilir.

position özelliğinin değerleri

static 
1.static-element {
2    position: static;
3}
  • static-element sınıfında, position değeri static olarak belirlenir. Öğe, normal akış içinde konumlandırılır.
  • static varsayılan bir değerdir. position belirtilmezse, static uygulanır.
  • Öğe, normal belge akışına göre konumlandırılır. top, right, bottom, left özellikleri kullanılamaz.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • relative-element sınıfında, position değeri relative olarak ayarlanır. Öğe, normal konumuna göre hareket eder. Bu örnekte, 10px aşağı ve 20px sağa konumlandırılmıştır.
  • relative belirtildiğinde, öğe göreceli olarak konumlandırılır. Öğe, normal belge akışını takip ederek, top, right, bottom, left özellikleriyle belirtilen konuma orijinal pozisyonundan hareket eder.
  • Relative olarak konumlandırılmış bir öğe, hareket ettikten sonra bile orijinal pozisyonunda boşluk bırakır.
  • Bu örnekte, öğe orijinal konumundan 10 piksel aşağı ve 20 piksel sağa hareket eder, ancak belge akışı orijinal konuma göre işlenir.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • absolute-element sınıfında, position değeri absolute olarak ayarlanır. Bu örnekte, öğe üst-sol köşesinden (ebeveynin ya da görünümün) 10 piksel aşağı ve 20 piksel sağa pozisyonlandırılmıştır.
  • absolute belirtildiğinde, öğe ebeveynine göre mutlak olarak konumlandırılır. Eğer üst öğenin position değeri relative, absolute veya fixed olarak ayarlanmışsa, öğe top, right, bottom, left özelliklerini kullanarak o üst öğeye göre hareket eder. Eğer bir üst öğe bulunamazsa, tüm sayfaya (görünüm alanına) göre konumlandırılır.
  • Absolute olarak konumlandırılmış bir öğe, normal belge akışından çıkar ve diğer öğeleri etkilemez.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • fixed-element sınıfında, position değeri fixed olarak ayarlanır. fixed belirtmek, öğeyi sabit bir konuma yerleştirir. Öğe, görünüm alanına sabitlenmiştir ve kaydırma sırasında hareket etmez.
  • Örneğin, bir sayfa başlığını veya gezinme çubuğunu her zaman görünür tutmak için kullanılır.
  • Bu örnekte, öğe ekranın sağ alt köşesine sabitlenmiştir ve sayfa kaydırıldığında bile orada kalır.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • sticky-element sınıfında, position değeri sticky olarak ayarlanmıştır.
  • sticky belirtildiğinde, öğe kaydırmaya göre dinamik olarak konumlandırılır. Normal belge akışını takip eder, ancak sayfa kaydırıldığında, belirtilen top, right, bottom, left değerlerine göre belirli bir konumda "yapışır".
  • sticky, belirli bir aralık içinde sabit bir öğe gibi davranır.
  • Bu örnekte, öğe normal pozisyonunda görüntülenir, ancak sayfa belirtilen top pozisyonuna kaydırıldığında o konuma yapışır ve kaydırmayı takip eder.

top, left, bottom, right özellikleri

top, left, bottom ve right, CSS'de öğe pozisyonlarını kontrol etmek için kullanılan özelliklerdir. Bu özellikler, bir öğenin pozisyonuna göre belirli bir yönde ne kadar hareket edeceğini belirtmek için position özelliğiyle birlikte kullanılır.

Ancak, bu özellikler yalnızca position değeri relative, absolute, fixed veya sticky olarak ayarlandığında geçerlidir. Varsayılan static değerinde, bu özellikler hiçbir etkide bulunmaz.

top, left, bottom, right nasıl kullanılır

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • top özelliği, bir öğenin üstten ne kadar uzaklaştırılması gerektiğini belirtir.
    • Bu örnekte, öğe normal pozisyonundan 20px aşağı hareket eder.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • left özelliği, bir öğenin soldan ne kadar uzaklaştırılması gerektiğini belirtir.
    • Bu örnekte, öğe soldan 50px sağa hareket eder.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • bottom özelliği, bir öğenin alttan ne kadar uzaklaştırılması gerektiğini belirtir.
    • Bu örnekte, öğe ekranın altından 10px yukarıda sabitlenmiştir. Kaydırma sırasında bile bu pozisyonda kalır.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • right özelliği, bir öğenin sağdan ne kadar uzaklaştırılması gerektiğini belirtir.
    • Bu örnekte, kaydırma sırasında öğe sağdan 20px sola hareket eder ve o pozisyonda sabitlenir.

position özelliği ile ilişki

  • relative: Öğeyi, normal pozisyonuna göre belirtilen top, left, bottom, right değerleri kadar hareket ettirir.
  • absolute: Öğeyi, position değeri relative, absolute veya fixed olarak ayarlanmış en yakın üst öğeye göre belirtilen top, left, bottom, right konumuna taşır.
  • fixed: Öğeyi, görüntüleme alanına (ekranın tamamına) göre belirtilen pozisyona sabitler. Kaydırma sırasında bile bu pozisyonda kalır.
  • sticky: Öğe, kaydırma sırasında belirtilen bir pozisyona ulaşana kadar normal pozisyonunda kalır ve o noktada "yapışır.".

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Tabloyla ilgili CSS özellikleriFlexbox ile ilgili CSS özellikleri