Ustawienie przycisku w konkretnym miejscu na obrazku background


(janusz_pro) #1

Witam

Mam problem z uzyskaniem efektu buttonu na dole strony. Próbowałem marginami i paddingami ale nie wiadomo czemu przycisk pojawia się random’owo w zależności od rozdzielczości urządzenia (parametry podawałem w %)

<ion-content padding class="background">

  <div class="przycisk" text-center>
    <button ion-button >Test</button>
  </div>

</ion-content>

Czyli całość ekranu zajmuje obrazek i chciałbym żeby na dole tego obrazka był button.


(Fizyda) #2

Nie wiem o co Ci chodzi, zrozumiałem jedynie, że chcesz umieścić coś względem czegoś innego. Do tego użyj position relative i absolute, a nie margin i padding, to służy do czegoś innego. Dodatkowo jeśli strona jest responsywna może być koniecznie ustalenie pozycji dla poszczególnych widoków.


(AnonimX) #3

Ciekawa składnia.
Jak ma być na środku, to są 2 rozwiązania:

  • display:block, określona długość oraz margin: 10px auto (oczywiście 10px to wartość przykładowa)
  • display:inline-block i text-align:center dla nadrzędnego elementu

(janusz_pro) #4

Mamy kontener w którym jest tylko background image i chciałbym na dole tego tła centralnie na środku dodać button


(AnonimX) #5

Jeśli znasz angielski, to pomocny będzie ten poradnik:


(Fizyda) #6

No to najlepiej będzie zastosować 2 triki, pierwszy to position absolute i relative, drugi to pozycjonowanie na środku poprzez text-align. Przykładowy kod:

https://jsfiddle.net/4xuvvoq5/6/

EDIT:
Tak szczerze mówiąc przez te 2 i pół godziny znalazłbyś sam rozwiązanie w necie zamiast czekać na gotowca. Przy okazji byś się nauczył dużo więcej i rozumiał jak to w ogóle działa. Teraz masz przykład a i tak musisz poświęcić jeszcze czas na jego zrozumienie.


(krystian3w) #7

Albo w czymś nowszym (flexbox):

https://jsfiddle.net/4xuvvoq5/17/


(Fizyda) #8

Chyba się już nie przestawię na używanie “nowych” rozwiązań :stuck_out_tongue: , niby wiem i znam flexbox i grid, ale jakoś i tak używam starych metod.
Swoją drogą czy Twoje rozwiązanie nie posypie się jeśli dodamy coś do kontenera z tłem i będzie miało mieć to zwykłe zachowania? Np. zwykły akapit tekstu?

EDIT:

Stare rozwiązanie:
https://jsfiddle.net/4xuvvoq5/23/
vs nowe rozwiązanie:
https://jsfiddle.net/4xuvvoq5/22/
problemem jest colum-reverse, po poprawkach działa:
https://jsfiddle.net/4xuvvoq5/24/

Wydaje mi się, że żadne rozwiązanie nie jest dostatecznie dobre, jeśli założymy, że ten przycisk ma być na tle i nic więcej na nim nie jest wyświetlane to oba rozwiązania dają ten sam efekt, gdy jednak w przyszłości będziemy chcieli dodać coś jeszcze na tym tle poza przyciskiem i miałoby to być pozycjonowane niezależnie od tego przycisku to w obu przypadkach trzeba edytować CSS - u Ciebie zmienić flex direction, a u mnie nachodzące obiekty.
Jednak jeśli chcemy mieć stałą wysokość kontenera z tłem w tedy flex staje się problematyczny względem starego rozwiązania:
Flexbox: https://jsfiddle.net/4xuvvoq5/26/
Stare: https://jsfiddle.net/4xuvvoq5/27/

W sumie to bardzo ciekawe zagadnienie, porównanie dwóch technik w zależności od przypadku użycia. Chyba nie ma najlepszego które z dużą pewnością nie wymagałoby aktualizacji CSS albo HTML w przyszłości.