Это видео недоступно.
Сожалеем об этом.
Position - pozycjonowanie elementów na stronie
HTML-код
- Опубликовано: 17 авг 2024
- Jeśli podobał Ci się nasz materiał o box-model, koniecznie zobacz co przygotowaliśmy na temat właściwości position w CSS :)
Chcesz wiedzieć czym różni się pozycjonowanie absolutne od relatywnego? Czym jest position fixed a czym position sticky?
W tym krótkim materiale dowiesz się najczęstszych przypadków użycia tych słów kluczowych, po opanowaniu których staniesz się lepszym front-end developerem.
Miłego oglądania!
00:00 - Intro
00:08 - Wprowadzenie
00:40 - position: relative
02:11 - position: absolute
06:58 - position: fixed
08:28 - position: sticky
09:46 - Podsumowanie
10:00 - Outro i blooper
Konkurs na animacje svg: koduje.pl/konku...
Koduje - Kursy i ćwiczenia z Front-Endu
koduje.pl/
Jedyny filmik, który dobrze jest wytłumaczony. Ładne przykłady pokazane, bez chaosu. Tylko konkretnie co i jak. A zwłaszcza w języku polskim. Super!
Kilka lat się męczyłem i nie mogłem zrozumieć. Teraz wszystko rozumiem
O sticky nie słyszałem wcześniej a widzę że bardzo fajne :) tylko czekać aż wszystkie przeglądarki będą to wspierać :) Dzięki!
My też nie możemy się doczekać, dzięki za komentarz i pozdrawiam!
jak zawsze świetny filmik, więcej osób powinno udostępniać Wasze materiały wśród znajomych bo wciąż za mało macie widzów jak na taką jakość materiału :)
Nasza przyszłość w waszych rękach! Pozdrawiam serdecznie i dzięki za komentarz :)
Wojtku zwolnij, Twoi sluchacze muszą zrozumieć. Dobre materiały robisz jako powtórka nauki
Wszedłem obejrzeć film żeby sobie uporządkować wiedzę ale zostanę na dłużej.
Świetna robota.
Świetny materiał, bardzo przydatny (jak zwykle z resztą). Podoba mi się sposób, w jaki prezentowane (i tłumaczone) są treści w Waszych wideo. Prosto, obrazowo i konkretnie. Pozdrowienia!
Dzięki Dawid, bardzo nam miło. Pozdrawiamy!
Solidna dawka wiedzy. Tylko muszę to jeszcze przetrawić i przemyśleć, żeby porządnie do głowy weszło. Dzięki.
Dzięki, mam nadzieje, że pomogłem! Pozdrawiam serdecznie :)
Bardzo przydatny film! dziękuję! :)
Serio fajny ten kanał. Bardzo często znajduje to czego potrzebuje
Bardzo mi sie przyda ten film
Swietny meterial! Wszytsko wytlumaczone jak nalezy :)
Wykomentowanie całej linijki?
Najs.
Świetne wyjasnienie! Dzięki!
nareszcie posadziłem listę tam gdzie chciałem
+loleuw7 super! Ciesze się, że mogłem pomóc :)
WoW! Kapitalnie zrobione lekcje. Najlepsze jakie do tej pory widziałem na poslkim YT. Trzymajcie poziom! Możecie polecic jakąś książkę która wg was jest wartościowa w zakresie css3?
Dzięki serdecznie za pozytywną opinię! CSS Secrets by Lea Verou jest dobre, można ją wygrać w naszym konkursie na animacje svg :) kodu.je/konkurs/animacja-svg-2017 . Pozdrawiam!
swietnie to przedstawiacie. gratuluje takiej pracy :D
Mocny materiał dużo mi pomoże w połączeniu z tym co czytam w social media manager , dzięki za to ;)
Super, cieszę się że mogłem pomóc :) pozdrawiam!
Super tłumaczenie i pomoc. Poleciał sub :)
Rewelacyjne. Dzięki.
Rewelacyjny tutorial ! Dzięki
+Codeina Games dzieki, pozdrawiam i wesolych!
To teraz coś o keyframes! Pozdrawiam!
No i przy okazji jest też konkurs! :)
Mega pomocny materiał :)
+★GeXu★ super! Cieszę się, że Ci się podobało :) wszystkiego dobrego w nowym roku!
jak zawsze super 👌
Dzięki! Pozdrowionka!
Fajne filmy, oby tak dalej !! :D
Dzięki Krzysztof, dopiero się rozkręcamy :D
Pamiętam pierwsze filmy przez was wstawione, myslałem - "Pewnie jakas lipa bedzie, kilka filmów wstawią i tyle...." a tu tak sie to rozkręciło :D
Genialny kanał
a jak założymy, że boxy to zdjęcia i chciałbym załóżmy na 3 i 4 boxie w pierwszym rzędzie dodać tekst żeby był wyśrodkowany na boxie to jak mam to rozpisać w css?
Nie działa mi zmiana koloru w .rel, wszystko inne chodzi, czyli zmienia pozycję w zależności od ustawień.
Chyba musiałbyś podrzucić kod :) może to być kwestia specificity - sprawdziłeś? Mamy o tym materiał na kanale
Co jeśli chce zmienić wysokość np. postów na bloggerze? Próbowałam .posts ale totalnie nic się nie rusza
Wszystko super. Ale nie ma takiego słowa 'rylajtiw' w języku angielskim, może istnieje w poloengliszu, no ale w angielskim to po prostu relative.
pariramable strasznie mnie bolało słuchanie tego xD
Bardzo fajne! Może ciut szybko ale git!
PS tylko proszę - nie "rilejtif" ;)
+Piotr wojciewicz faktycznie, cale zycie w klamstwie, dopiero jak o tym wspomniales to to zauwazylem :) dzieki, pozdrawiam!
No cóż taka mała rzecz ;)
Gratuluję dystansu do siebie :) nie wspomnę o wiedzy! chyba 10 razy będę odsłuchiwał Twój tutorial - super!
bardzo fajny film a mozecie wytlumaczyc jeszcze
div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
} ???
Pewnie! W tym wypadku ten div zostanie "rozciągnięty" na całą szerokość i wysokość najbliższego rodzica bez position static. Jest to w pewnym sensie odpowiednik width: 100% i height: 100%. Jeśli natomiast zdefiniowałbyś szerokość i wysokość tego elementu i nadał mu dodatkowo margin:auto, to te reguły wycentrują Ci element w pionie i w poziomie względem tego samego rodzica. Pozdrawiam serdecznie i dzięki za komentarz!
dziekuje pozdrawiam
kodu.je: warto dodać że jeśli ustawimy mu również konkretne szerokości lub wysokości (również w procentach) i ustawimy margines na auto, element zostanie wypozycjonowany centralnie względem rodzica, w zależności od tego czy ustawimy wertykalnie czy horyzontalnie lub obydwa na raz. Centralnie oczywiście do wartości jakie ustawimy w top/bottom/left/right - warunek - muszą być ustawione.
Hej, podobają mi się Twoje prezentacje. Zdradziłbyś z jakiego programu korzystasz? Pozdrawiam!
Hej :) to nie prezentacje, to nagrania wideo. Koduje na zywo. Korzystamy ze ScreenFlow, motion i final cut pro
Dziękuję za błyskawiczną odpowiedź - przetestuje sobie ten program :) Ja korzyłem z Camtasia Studio - który program Waszym zdaniem jest lepszy? Pozdrawiam Piotrek!
Ciężko stwierdzić - zestaw powyżej dla nas działał najlepiej, ale pewnie camtasia tez da rade :) pozdrawiam! // Wojtek
W jakim programie piszesz? Jest tam od razu podgląd na stronę, jak na filmie?
Brackets od Adobe
Cześć. Mam pytanie z innej beczki. Znasz może sposób na animowanie/ostylowanie danego elementu po najechaniu na inny, gdzie ten "inny" nie jest rodzicem animowanego, nie używając JQuery, czy ogólnie niczego innego oprócz CSS?
Coś w stylu:
#elementNajechany:hover #elementStylowanyPoNajechaniuNaElementNajechany{style}, czyli
jeśli #elementNajechany:najechany, to #elementStylowanyPoNajechaniuNaElementNajechany{styluj} :)
Z tego, co jeszcze pamiętam (kiedyś próbowałem), to coś takiego, jak wyżej, nadaje się do animowania elementu, który jest dzieckiem najechanego elementu, ale już nie do elementów w innej relacji. Nie wiem, czy dobrze wyraziłem to, o co mi chodzi. Jak coś to postaram się wyjaśnić inaczej
Cześć. W samym CSSie możesz targetować w ten sposób tylko elementy które są dla siebie rodzeństwem albo są potomstwem elementu na który najechałeś myszką. W skrócie: możesz wykorzystać .trigger:hover + .target albo .trigger:hover ~ .target jeśli target nie ma być zagnieżdżony. Mamy o tym nawet materiał, w którym wykorzystuję te właściwości - ruclips.net/video/n6twSVhUslk/видео.html (star rating).
Ale często lepiej użyć JavaScriptu niż korzystać z CSSa i robić bardzo dziwne rzeczy z markupem :)
Pozdrawiam serdecznie!
Ewentualnie cos bardziej zlozonego jak .elem:hover ~ .cos_za .dziecko_cos_za {....}
Dzięki za odpowiedzi. Pozdrawiam również.
Marcin, tak próbowałem i nie działa
Cześć. Jaką książkę anglojęzyczną i polską po jednej byś polecił do nauki css i js?. :)
Z góry dziękuje za odpowiedź.
Lea Verou CSS Secrets - rozdawaliśmy tą książkę jako nagrodę w konkursie na animacje grafiki SVG :) Pozdrawiam!
kozak
💪💪💪
@koduje nie działa ten darmowy materiał z Node.js, da się coś z tym zrobić?
+Gnidus Totalus hej. Na chwile obecna sklep jest zamkniety, prosimy o cierpliowsc i ew kontakt na facebooku
Że tak zapytam... jak można pozycjonować elementy tak zeby na telefonie tez były poprawnie wyświetlane.
Przy użyciu transform: translateX(60px); już widać na telefonie że element ucieka poza "obszar roboczy"
Media queries :)
@@koduje dzięki, masz może odcinek w którym to omawiasz? :)
@@koduje robiłeś może materiał, gdzie omawiałeś Media queries :) ?
Jaka to jest ta paleta kolorów kodu.je? Proszę o odpowiedź.
#696e9e i #34b399 to te najbardziej charakterystyczne ;)
jak zachowuje sie flex przy bootstrapie?
+Mateusz Bieda co masz na mysli? Mysle ze calkiem okej, 4 chyba uzywa juz flexa pod spodem z tego co pamietam :)
W jakim programie piszesz???
Edytor to Brackets ;)
Dziękuję za odpowiedź :)
Świetnie, że odpowiadacie sobie nawzajem! :) Mamy nawet webinar wprowadzający do korzystania z tego edytora ruclips.net/video/HUUbzl7Uubs/видео.html
Hej, jakiego edytora używasz?
+Jey Jey hej - Brackets :)
Witam, napotkałem się z nową funkcją w js w której nie trzeba wstawiać + ' ' w ten sposób spacji. Moglibyście to opisać ?(chodzi o ("dziś odwiedziło nas:" + " " + zmienna))
Czy mówisz o template stringach? Sprecyzuj proszę swoje pytanie to postaramy się pomóc :)
przykład: " return `${tekst1} ${tekst2}`; "
+TheSzoker18 tak, to sa template string z ES6
koduje no to sam o tym poczytam dziękuję
Mam problem ze stroną. Jest możliwość taka aby ktoś z was na nią zerknął ?
Raczej nie zajmujemy się tego typu pomocą na tym etapie :/ Spróbuj na HTML5 i CSS3: pierwsze kroki na Facebooku.
zwolnilem predkosc odtwarzania do 0.75 i jest znacznie lepiej :)
+Chris Libuszowski cieszę się, że udało Ci się dopasować nagranie do swoich potrzeb :) pozdrawiam!
Juniorzy zawsze wszystko łapią wolniej i potrzebują więcej czasu;)
Wojtek napierdala jak po kilogramie amfetaminy. Damian..no sami widzicie
Puść na 0.75 ;)
super! Tylko "reelativ" a nie "rilejtiv" ; www.google.com/search?q=relative+spelling&oq=relative+speli&aqs=chrome.1.69i57j0.6628j1j7&sourceid=chrome&ie=UTF-8
Już wiem - wtedy nie wiedziałem ;) dzieki za komentarz, pozdrawiam!
@@koduje Jasne! Sorry za poprawianie. Dzięki za świetne materiały w polskim YT !
Luzik! Człowiek uczy się całe życie :) Cieszę się, że Ci się podobało - wszystkiego dobrego!
Będę korzystać z Twojej wiedzy. Dzięki- wzajemnie, all the best!
Ten kanał nadal ŻYJE ??? xd
Na komentarz odpisze :)
@@koduje filmu nie zrobi xd
@@koduje jest nowy kanał czy po prostu życie ? xd
Świetne wyjasnienie! Dzięki!