CSS - position: fixed

0

Za pomocą media queries chciałbym przenieść obrazek z centrum na samą górę strony, gdy szerokość ekranu zejdzie do 400px i poniżej. Poglądowy rozkład strony

body

container
>navbar
>logo
>tekst
>zdjecie
>footer
Również widać to w jsfiddle (chociaż z jakiegoś powodu mediaqueries nie działają tam) https://jsfiddle.net/0L28dojn/.

Dążę do tego, aby na urządzeniach moblinych przenieść zdjęcie na samą górę strony. Wykorzystuję do tego position:fixed, ale wtedy podczas scrollowania to zdjęcie zostaje "przyklejone" do ekranu. Jak to optymalnie rozwiązać?

1

Bo w fixed chodzi właśnie o to, żeby pozycjonować element względem okna przeglądarki i jest on wtedy do niej przyklejony.

Generalnie sam miałem problemy z ogarnięciem właściwości position i sam jej do końca nie ogarniam i jest możliwe, że napiszę teraz kilka głupot ale:

Masz 4 właściwości position:

  1. Static - właściwość domyślna, czyli nic się nie zmienia. Element jest w miejscu, w którym byłby "normalnie".
  2. Relative - przesunięcie względem miejsca, w którym element znajdowałby się jako static
  3. Aboslute - ustawienie względem granicy kontenera, w którym element się znajduje
  4. Fixed - element jest ustawiony względem okna przeglądarki i jest do tego okna przyklejony.

W twoim przypadku wydaje mi się, że najlepiej będzie użyć właściwości absolute. Czyli jak napiszesz np:

position: absolute;
top: 0;
margin-left: auto;
left: 0;
margin-right: auto;
right: 0;

To element będzie się znajdować 0 pikseli od górnej krawędzi strony i wyśrodkowany po bokach.
Jeżeli nie chcesz mieć elementu centralnie na środku, to musisz się pobawić właściwościami left i right.

edit: i jeszcze jedno - jeżeli zaczynasz przygodę z webdevem, to radziłbym Ci poczytać trochę więcej o właściwości position, bo daje Ci ona rzeczywiście spore możliwości w układaniu elementów na stronie, ale ma swoje "kwiatki" i jest czasami dość problematyczna.

0
Eszy napisał(a):

Bo w fixed chodzi właśnie o to, żeby pozycjonować element względem okna przeglądarki i jest on wtedy do niej przyklejony.

Generalnie sam miałem problemy z ogarnięciem właściwości position i sam jej do końca nie ogarniam i jest możliwe, że napiszę teraz kilka głupot ale:

Masz 4 właściwości position:

  1. Static - właściwość domyślna, czyli nic się nie zmienia. Element jest w miejscu, w którym byłby "normalnie".
  2. Relative - przesunięcie względem miejsca, w którym element znajdowałby się jako static
  3. Aboslute - ustawienie względem granicy kontenera, w którym element się znajduje
  4. Fixed - element jest ustawiony względem okna przeglądarki i jest do tego okna przyklejony.

W twoim przypadku wydaje mi się, że najlepiej będzie użyć właściwości absolute. Czyli jak napiszesz np:

position: absolute;
top: 0;
margin-left: auto;
left: 0;
margin-right: auto;
right: 0;

To element będzie się znajdować 0 pikseli od górnej krawędzi strony i wyśrodkowany po bokach.
Jeżeli nie chcesz mieć elementu centralnie na środku, to musisz się pobawić właściwościami left i right.

No właśnie zdjęcie jest zagnieżdżone, a wykorzystując position: absolute rozmieszczam go (chyba) względem elementu rodzica, anyway, to rozwiązanie nie zadziała

0

A w jakim miejscu ma być to zdjęcie na stronie?

No tak, absolute względem rodzica, czyli w kontenera, w którym się znajduje.

0
Eszy napisał(a):

A w jakim miejscu ma być to zdjęcie na stronie?

No tak, absolute względem rodzica, czyli w kontenera, w którym się znajduje.

W takim razie, rozwiązaniem będzie zrezygnowanie z zagnieżdżenia tego zdjęcia

3

absolute działa względem rodzica posiadającego pozycjonowanie relatywne lub fixed a nie każdego rodzica, czyli możesz mieć div ustawiony na relative potem 20 kolejnych zagnieżdżeń i div oznaczony jako absolute i ten absolute pominie te 20 divów i będzie działał względem pierwszego napotkanego relative.

1 użytkowników online, w tym zalogowanych: 0, gości: 1