Konumlandırma (Position)

Bir elementi konumlandırmak için sizler için önceden tanımlanmış classları kullanabilirsiniz.

<div class="position-static">...</div>

<div class="position-relative">...</div>

<div class="position-absolute">...</div>

<div class="position-fixed">...</div>

<div class="position-sticky">...</div>

Ögeleri konumlandırma

position: absolute;

1

2

3

4

5

6

<div class="position-absolute top-0 left-0"> 1 </div>

<div class="position-absolute top-0 right-0"> 2 </div>

<div class="position-absolute top-50 left-50"> 3 </div>

<div class="position-absolute bottom-50 right-50"> 4 </div>

<div class="position-absolute bottom-0 left-0"> 5 </div>

<div class="position-absolute bottom-0 right-0"> 6 </div>

auto değerleri

<div class="top-auto"> content </div>

<div class="bottom-auto"> content </div>

<div class="left-auto"> content </div>

<div class="right-auto"> content </div>

Merkezi konumlandırma

transform: translate(X, Y);

1

2

3

4

5

6

<div class="position-absolute top-0 left-0 translate-middle"> 1 </div>

<div class="position-absolute top-0 left-100 translate-middle"> 2 </div>

<div class="position-absolute top-50 left-50 translate-middle"> 3 </div>

<div class="position-absolute bottom-50 right-50 translate-middle"> 4 </div>

<div class="position-absolute top-100 left-0 translate-middle"> 5 </div>

<div class="position-absolute top-100 left-100 translate-middle"> 6 </div>

Örnekler

<button class="btn btn-primary position-relative">

Mesajlarım

<span class="position-absolute top-0 left-100 translate-middle badge bg-dark">+9</span>

</button>

<button class="btn btn-dark position-relative ml-4">

İpucu

<span class="position-absolute top-0 left-100 translate-middle badge border border-light border-circle bg-danger p-1"></span>

</button>

Konum Yayma (inset)

<button class="inset"></div>