Relative, Absolute, Fixed, & Sticky Positioning in Bricks Builder - Fix Your Attachment Issues!
Vložit
- čas přidán 28. 07. 2024
- It's time to get therapy for your attachment issues!
If you want to step up your web design game, you've gotta be a master of positioning elements. That means knowing the difference between static, relative, fixed, absolute, and sticky positions.
In this video, I explain each position and how it works. I also give a quick tip on getting sticky elements to behave on mobile devices.
While this video doesn't cover every detail of every position, it's a great starting point that should give you enough info to use these positions in your work. As you do that, you'll get better at them over time.
I reply to all questions, so you don't hesitate to drop a comment if you need more clarification on anything.
My Inner Circle: digitalambition.co/inner-circle/
AutomaticCSS: automaticcss.com
Frames: getframes.io
00:00 Intro
01:20 Why Positions Are Confusing
02:55 Static Position (Default)
04:53 Fixed Position
07:15 Static Coordinates Don't Work
08:00 Position Relative
12:00 Position Absolute
22:50 Super Important Absolute Feature
26:52 Position Sticky
37:03 Recap
What was your biggest "aha" moment with positioning?
pretty much one big moment for me!
Creating the stretch channel for the fixed child. It no longer behaves like the idiot child of the family!
absolute to absolute was my aha moment Kevin. I was thinking parent must be relative. Thanks for another great tutorial.
That "relative" is relative to the static position
Many aha moments with you Geary! I guess one aha moment that I think it made me to get it a bit better was when you explained how to control the container, or div instead of the image itself!
I will not get tired to say how amazing and enjoyable your lessons are! These help to grasp the foundational concepts really well! I love how you take us through your thoughts processes and even give us some time to figure things out something before you do it; makes it feel as if we are right there with you. Thank you again for the wonderful work!
You're very welcome!
aha moment is the simple way you navigated the reference points.
relative = to fixed starting point
fixed = viewport
absolute = first non-static parent
Your crazy understanding of CSS is just awesome. The explanation is even better and enjoyable.
I appreciate that!
Niche videos don't get as much hype as generic videos, but I appreciate the niche help on understanding the positions for bricks builder.
Absolutely spectacular teaching! Well-explained! Thank you!
This is one of the all time greats for stacking / inlining and how style positioning work. What a lot of older page builder tried to hide from us so we thought we need the clunky stuff. But learning positioning, having a great builder like Bricks or Cwicly enabling using this fully transparent and easy employable gives such a tremendous freedom of design. Fast and proper...
💯
Hey Kevin, I just got back from the Future because, in one of your future videos (8. August 2023), I got told to reach back to see the answer to one of my questions. Thank you from the Future! ;)
Just saved my life once again :-). Sticky did not work as expected. Rewatching solved the problem. Never forget to think about the height of the parent...
Thanks, Kevin. You explain concepts really well. I've (sort of) figured this out through trial and error, but it's nice to have it all in one place. I can see figuring things out so much quicker after having watched this.
I've rarely seen clearer content ! Thank you so much ! ;)
I love the flexbox stretch trick! I always used the media queries, but now I'm switching to that :)
Totally underrated !
Hey Kevin, thank you! And I thought there was nothing else to learn about positioning...The fix (wrapper) to responsive sticky elements is amazing!
Glad to help!
Saw so many videos about positioning elements, only yours made my brain click and understand it. Thank you!
Yay! Love to hear that.
You are a great teacher in nature, many people have the knowledge but don't have the charisma to explain it in a nice way
Thanks a million
Thanks a million
Missed that one ! Thanks for the reminder in PB101 L17 and thank you Kevin for your time and work 😃
I didn’t know absolute would attach to the first non static element. Very helpful video. It helped make much sense of attachment. 😂
This was a very informative watch for me as a beginner! Thank you
Glad it was helpful!
That's an absolute GEM!!!
It would be great if you could make a video about HTML tags and the best practices for using them in a website design.
Great Use of stretch and sticky... Love it
Another excellent lesson Kevin. Thank you. Love soaking this stuff up!
Thanks, Kevin! Another really helpful video!
Splendid! Thanks for this incredible useful piece of information!
Thank you Kevin. Perfect Explanations, Mandatory video .
Absolutely brilliant, priceless. Finally understood.
this tut is just hilarious !! Your expression but also the content is crazy good! :)
You sure know how to teach, thank you so much 😊
My pleasure 😊
Great stuff..
An idea for future conte t would be common use cases for all these positioning presets
great content, Kevin :) Thank you!
Glad you liked it!
Thanks
Great video as always, Kevin! Just one small note: You mention that absolute elements are positioned relative to the first relative parent. But actually they are positioned relative to the first "positioned" parent - which can be relative, absolute, fixed or sticky.
Ignore my comment. One should finish the video before making any comments. 😅
I can’t wait! Another helpful video would be one showing us how to add schema markup to accordions when using them for FAQ.
Could you also do a video on the current Grid that’s in Bricks Builder? You made a video explaining what it is, but a more detailed video that talks about how to make a hero, sections etc using grid. Also possibly designing a figma file using bricks.
I’ve done a lot of tutorials showing grid. What do you mean designing a figma file with bricks?
@@Gearyco converting a Figma design into bricks. ?
Thank you for responding btw
Thank you, Kevin, the video is great and very helpful. I'd like to ask something: how do you manage to display the outlines of sections, containers, and blocks when you hover the mouse over them? Mine doesn't show these outlines and they only appear when I actually click on the element, which is quite inconvenient.
Hmm. This is the default behavior of Bricks.
Kevin, dedicated accessibility videos would be super helpful.
One thing I cant figure out is why pricing plan layouts should have individual header and footer in the cards. Shouldn't they just be a list like features and such are?
And one more thing, a11y colors, even Twitter logo blue against white bg doesnt even achieve AA. But when you look at it, there is plenty of contrast. It's not always better and accurate at all to follow the a11y contrast ratio but I've seen sites solve this with a high contrast mode you can turn on.
May do some dedicated accessibility videos.
hi, great video as usual.
Couple comments/ questions:
1. For "sticky" navigation (top bar menu) would it be better to use sticky or fixed if I want the navigation to be always visible. If sticky, I imagine I'd have to put the nav element outside of any section?
2. you reference automatic CSS a lot and I get that it is helpful, but $70 is a lot of money for some people, or at least me when I'm not making any money yet. When CSS frameworks like Bootstrap and tailwind are available for free and offer the same kind of classes, its hard to justify that cost. But from my research it also appears Bootstrap and tailwind may be a bit difficult to work within WordPress. (not really sure why that would be the case) But do you have any experience trying to utilize those frameworks? I know for your purposes ACSS is helpful, but could you try to do your courses with the assumption that not everyone has that plugin. I know you do try to show both ways sometimes.
EDIT: I didn't realize you created ACSS. -- of course you are going to promote it. But the point still stands if you can take it into consideration.
3. Do you have a course on creating dynamic elements like dropdown lists, modals, popups, etc? I know most use some form of JS, but can they be done via CSS alone?
Thanks again.
1. Fixed position.
2. ACSS and Tailwind are antithetical in philosophy. One is not like the other. Bootstrap is outdated no longer relevant IMO.
Only ACSS is truly designed to work in page builders.
My free course, Page Building 101, shows website creation without a framework.
3. There are CSS-only versions, but you typically need JS to check all important boxes.
Thanks! I tryed the sticky positioning out with a DIV an some text inside istead of the image. But then the DIV isn't sticky... with the image it worked. Anyone have an idea? Thanks!
Is this how I would make a transparent header that overlaps with my hero section?
I feel like if the words relative and absolute would be switched the concept would be a lot more intuitive.
You would think that you need an absolute object to position something relative to it not the other way around 😅
Relative shouldn’t be a position option. Everything is relative to something. It’s a redundant word that they assigned a specific meaning to.
This is a bit random, but what do you think about justified text in webdesign? I know there are a bunch of articles claiming it's bad for web, because of all the resolutions and devices and that it is rather for printed text. But nowadays with clamp functions and fluid text it seems to look good on most screen sizes and feels easier to read because every line starts and ends at the same vertical line.
I thought I'd ask you because I'm watching lot of your stuff lately and I like your approach and way of thinking.
Avoid justified text on the web for sure
brill
Not sure what that means.
How do you do the scretch part on minute 34:10 ? Awesome video btw
It's a class in ACSS
@@Gearyco What's that? can I do it without plugins? Thanks for your quick answer man!
Please Upload a step by step video creating a bricks builder home page without coding or CSS, it seems simple for youtube experts but for us beginners I'm sort of lost :(
Thank you Kevin!
I have this in the inner circle
@@Gearyco Would the inner circle help me if I'm a total beginner and not planning on digging deeper?
I only want to build my own website by my own without coding
@@yasmeenkaram9780 we just started a bricks beginner series where I teach my 10 year old daughter web design in bricks from scratch so it’s perfect for total beginners. She has zero experience.
@@Gearyco I joined the inner circle today and checked the video I was speechless of this genius idea exactly what I needed!
Million thanks
🙏
@@yasmeenkaram9780 yay! Glad it's helpful!
I'm taking a guess that the sticky position can't be used at the same time as a Sticky Header?
Yes, they can be used at the same time.
My attachment issues are just... gone! :)
Another person healed!
Today I took the time to copy Kevin's images custom sizes, the following is the code to use in your code snippet (recommended instead to mess with Child theme php function). After that, I couldn't see the new image sizes thumbnails, solution free plugins Regenerate Thumbnails and Buala! :
add_theme_support('post-thumbnails');
add_image_size('image-480', 480, 9999);
add_image_size('image-640', 640, 9999);
add_image_size('image-720', 720, 9999);
add_image_size('image-960', 960, 9999);
add_image_size('image-1168', 1168, 9999);
add_image_size('image-1440', 1440, 9999);
add_image_size('image-1920', 1920, 9999);
Initially the code was like the following, but for me, it worked like the above, but in case that this work for you/ or:
add_theme_support('post-thumbnails');
add_image_size('image-480', 480, 9999);
add_image_size('image-640', 640, 9999);
add_image_size('image-720', 720, 9999);
add_image_size('image-960', 960, 9999);
add_image_size('image-1168', 1168, 9999);
add_image_size('image-1440', 1440, 9999);
add_image_size('image-1920', 1920, 9999);
if (!function_exists('my_custom_sizes')) {
function my_custom_sizes($sizes) {
return array_merge($sizes, array(
'image-480' => 'Image 480',
'image-640' => 'Image 640',
'image-720' => 'Image 720',
'image-960' => 'Image 960',
'image-1168' => 'Image 1168',
'image-1440' => 'Image 1440',
'image-1920' => 'Image 1920',
));
}
}
add_filter('image_size_names_choose', 'my_custom_sizes');
Love the content, BUT why was it presented as a LIVE vid when it wasn't. Live content is great for interacting with the presenter - - I would have watched this later had it been posted as a regular vid. Argh! Excellent content and presentation though 👍
It's called a premiere. It's a pretty common CZcams feature for new videos that just enables live chat on the first play through. You can then watch the video any time you want just like a normal video. Is there some sort of issue with that?