Skip to main content

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>