0:00:00
What is up my friends? Welcome back to the channel. In today’s training, we are going to cover exactly how to position elements on a page inside of Bricks Builder. We’re going to take a look at how these different positions allow you to attach elements to different areas of the page, beginner concepts, advanced concepts. Basically this video is going to be the therapy that you’ve always wanted for your attachment issues. So let’s go ahead and dive right in. I am going to get started by adding a section element to our page and let’s go ahead and just drop an image in there just for now.
0:00:39
We may do some other things as well. How about we use this surfing image right here? And I am going to put a BG Bass Ultra light, if I could type today, on that section right there. And then I’m just going to add a few more sections to our page so we can just get a lot of a lot of elements going on here. A lot of space where we can scroll up and down and things like that. And we’re just going to start playing around. We’re just going to create a little playground here where we can experiment with some of the different positioning techniques and everybody can learn.
0:01:11
Okay. So the first thing that we’re going to do is we’re going to click on an element like this image and we’re going to go to the style tab and we’re under layout right here. We’re going to go down to positioning and you’re going to see that there is a position dropdown and we’re going to take a look at what our options are. We have static, relative, absolute, fixed and sticky. And this is where a lot of people really just, whoo, their mind is like it’s just spinning. It’s like a washing machine. They’re like, what is going on here? I don’t know what any of this stuff does.
0:01:41
And if you start to just choose things, right? As Seth Godin says, you know, poke the box. You just push buttons and figure it out just like a little kid would. You know, you give a little kid a toy, they just, they poke it, they just figure it out, right? If you try to do that, like I just changed it to relative, nothing happened, right? It’s like, what? I don’t get it.
0:02:02
And then I choose something like absolute It’s like hold on what is going on? I changed the image to position absolute and my section moved What is up with that? And then they’re like, all right Well, let me try fixed and then that doesn’t look any different than absolute. All right, let me go to sticky So now my section is back But nothing’s sticking what’s going on with it? And so like you can’t just push the buttons and figure it out because it’s really there’s a lot that’s not intuitive here. You have to know exactly how these things are behaving in order to get them to work the way that they’re supposed to work and that requires a little bit of knowledge. So this isn’t just you don’t just poke the box and figure it out in in many cases here. So let’s backtrack. Let me take away the position sticky.
0:02:51
The first thing you need to know is that all of these elements are positioned static by default. And if I duplicate this image right here, you’re going to see that it shows up below the image that was already there. You probably have already realized this, that things on the web stack top to bottom, right? Um, these are, you know, block level elements. Basically there are inline elements like links for example or buttons or whatever where they naturally like for example if I if I get a div here going right and inside of that div I’m like I want a button and a button All right, those two buttons show up next to each other because those are inline elements We’re not going to get into that so much because that’s not the world of positioning but for the most part, elements stack on top of other elements.
0:03:40
Now even when elements are next to other elements, they’re next to them, right? They’re not on top of each other. Um, like this image is never going to want to just be on top of the other image. They’re always one on top of the, like one underneath the other. Wow. That’s, it’s hard to talk in layers on the web. Um, it will stack below. How about that? It will stack below the other item, or it will stack next to the other item. It’s never just going to try to overlap on top of it. Right? And so items influence other items. If I remove this image right here on top, this image is going to slide up to take its place, right? So I hit delete.
0:04:20
There it goes. It slid up to take its place because one element was pushing the other element out of the way, that’s the stacking context of the web. And so the positioning of these elements, so if I click on this, and I go back to our little dropdown here, this is a way for us to manipulate the stacking context of elements on a website. Now, the first one that I wanna take a look at, the first positioning technique that I want to take a look at is position fixed because I think this is the easiest one for you to grasp.
0:04:58
So position fixed, I just said position fixed and now what I’m going to do is just going to start to scroll down my page. You can see that as I scroll up and down, the image stays fixed in place. Fairly easy to understand, right? So it is fixed to exactly where it was by default but now here’s the key. When you change something to position fixed you also have coordinates. You can tell the image where to fix itself to and a position fixed element is positioned relative to the device, to the browser directly to the top of the viewport basically okay if I position it also zero to the right it’s going to attach itself to the right side of the viewport now I can still manipulate its width for example so let’s do 20 rim and that’ll make it effectively around 200 pixels.
0:06:03
And then I can position it maybe toward the bottom. So I’m gonna do a zero. I’m gonna take the zero off the top. Let’s do the bottom left. So I’m gonna do zero. And now it’s way down here in the bottom left. I was gonna do bottom right, but I remembered that’s where I am. That’s where my head is down there, and I don’t wanna cover it up.
0:06:22
So we’ll just do bottom left. If you wanted it one M off the bottom and one M off the left, look at that. It’s just gonna just hang out down there. Have you guys seen those little floating chat bubbles, right? You can add that kind of stuff manually to your website. It’s just position fixed and then give it your coordinates and it’s going to stay right there for all of eternity. Doesn’t matter how long this page is or whatever else is there. It allows you to just put something in a fixed position and it’ll stay exactly right there. And that’s why I said I think this is one of the easiest ones to understand. Now I’m going to remove the position fixed and it’s going to go back to its default which is position static.
0:07:07
Now I want to note one thing on statically positioned elements because in Bricks you’re gonna see these coordinate boxes left right bottom and top I said those in I’m dyslexic Okay, I see things out of order sometimes. All right, so Sometimes you know what you might expect this is for bricks to say hey Well, these boxes don’t do anything when they’re present when this is positioned static So why are they there like there could be a little conditional logic to hide these boxes, but nonetheless, they’re not hidden. There is no conditional logic. But sometimes this will confuse people because they’ll be like, well, I want to move it a little bit to the right one M and their element goes nowhere.
0:07:47
And they’re like, oh, bottom one M, why isn’t it moving? Well, a statically positioned element cannot have coordinates. It behaves the way that it behaves, okay? It’s by default, that does not work. However, switching to position relative does allow you to put in coordinates. So watch what happens now. If I do 1M, it’s going to move it down 1M and people are trying to figure out, well, I don’t understand what is, what is relative positioning mean?
0:08:15
Okay. This is very important. So what I’m going to do is I’m going to delete that photo. All right. So I’m going to go up here to add image. We’re just going to stick with the same little surfing theme that we’ve got going on. There’s nothing special about these images. I just wanted two of them in here and I wanted them to be different. So I’m going to add the one that we had before and then I’m going to add another one and we will see exactly what’s going on here.
0:08:41
Okay, so I’m going to add this one, the girl holding the surfboard. Okay, so we’re just sticking with our surfing theme and I’m going to make both of these position relative. So I’m going to set this to position relative and actually let’s just do this one. Let’s just do the top one. That’s the only one we need to worry about. So this one is still its default position static. So I’m going to click on this one up here, position relative. Now I can use the coordinates. I’m going to do minus two M and look how it moved up minus two M. It actually came out of its little container that it was already in.
0:09:18
And the big thing I want you to notice though, is it moved independently of the image down here. If I take off this top coordinate, and I go up to margin and do minus 2m, I want you to notice that the image below comes with it. Right? Because you’re saying, hey, move this up to M, everything else is going to move up to M as well because everything is positioned kind of relative to the other things on the page. Even though, I get it, I get it, it’s confusing. Even though the default position is static. So what does relative even mean then? That’s a really good question. And I’m going to explain it to you right now. This is what, like, when I realized that this is what relative meant a while back, I was like, oh, now it makes perfect sense okay. Alright so I’m gonna go back down here to our coordinates and I’m gonna do the minus 2m. So position relative means relative to the static position. Oh man relative to the static position. The static position had this image here and as you see there’s still a placeholder for where this image is. If you imagine an invisible box where that image was a minus 2m relative adjustment moves it minus 2m relative to that initial position relative to that invisible box that that image was previously in. That’s what position relative actually means. Okay? Alright so now what I’m going to do is take this away. Actually we’ll just do a left too.
0:10:58
So minus 5M, it went 5M left of where it originally was. That is the relative position. So it’s relative to where I used to be. That’s what relative means. Okay? And as you do that notice that nothing else on the page is influenced by this movement whatsoever. We are only dealing with this one particular element. Whereas you saw earlier, a margin adjustment actually moves everything relative to the thing that is moving, okay? Because you haven’t really taken out, taken the element out of the natural stacking context because it partially because it allows me to move the element relative to that initial stacking context. Okay? Alright so that’s what position relative does but guys here’s the thing about this. These coordinates with position relative are almost never used. The real the real benefit of position relative is that you can now create an anchor for other elements like absolutely positioned elements. Okay, so what I’m going to do and we’re going to we’re going to do this with this parent container now because this is normally something you would do with a container. So I am going to let’s go back to just having one photo. I showed you what I wanted to show you there with relative positioning. And now we’re going to go back to here. Okay. I am going to change this image to position absolute. And this is going to just, everything is just going to blow up right here. Okay. So I am going to go image position absolute.
0:12:41
Great. You see that this section has shrunk and it’s like, why did the section change when I changed the position of this image and why did the image go nowhere effectively? Okay, well, first things first, we’ll talk about the section shrinking in just a second. First things first is that this absolute position also gives us coordinates and I’m going to put in a top of zero and you’re going to see that it goes to the top of this section right here. It did not go to the top of the browser or the viewport like fixed did, right? But watch this, I’m gonna go to the left, zero, oh, and it does go all the way to the left where the viewport was.
0:13:24
Okay, so what exactly is going on here? All right, so an absolutely positioned element will try to attach itself to the first parent it can find that is position relative. Now the body of the website is basically the container, and so if no other parent is position relative, it’ll just attach itself to that body, okay? That’s why it’s not jumping up here into our header. All right, so I’m gonna do, and I’ll just show you on the front end.
0:13:53
I’m gonna go top zero. I’m gonna go ahead and save. Let’s go ahead and look at this on the front end. And you see, it stopped, right? It didn’t go above our header like position fixed in position fixed. Only cares about the viewport position. Absolute cares about the first relative parents alright. So what I can actually do is I can say, well, you know what I want that container that was inside my section to be the parent of this absolute element so I’m going to go to style.
0:14:25
I have my container selected. You can’t really see it right now because there’s nothing in it. I’m going to grab my container. I’m going to come down here and change in position relative and look what happens. The image jumped down. Where did it jump down to? It jumped down to exactly where the top of my container was.
0:14:44
Let me pad this container real quick. So you can actually see it. So there is the blue outline of the container and look, it’s attached itself to the top of the container. Why? Because I said top zero and the container is the relative parent of my absolutely positioned element. If I took off on our container here, that position relative, just think in your mind, we’re just going to do a little quiz. What’s going to happen when I set this back to static?
0:15:11
What’s going to happen? Just think about it for a second. Now let’s do it. It went back to the top of the container. Okay now let’s see what happens if I move that image into this container down here. It stays in the same place even though I moved it into this other container over here. Why? Because there are no relative parents on the page so it’s attaching itself to the top of the If I wanted to attach it to this container down here, I would change that container to position relative and look where it attaches itself. Now what if I wanted to attach it to this entire section instead of this inner container? No problem, I can do that too. The container goes back to static, the section goes back to relative. And now it’s attaching itself to the top of that section.
0:16:03
So all this absolutely positioned element is doing is looking for the first relative parent that it can find. And it’s like, hey, you’re my true relative dog. I’m sticking with you, okay? And that’s what the absolute positioned element does. You have your coordinates available to you, right? And now the thing is, let me show you this. With images, it behaves a little bit differently. I’m gonna add a block in here and This block actually let me add a div Okay, because the div doesn’t go all the way across a div is just gonna be a little box right here And then I am going to pad this okay, and then I’m gonna add a little text into it, and it says I’m Absolute okay, and then I am going to also BG base that and we’ll do text white. Alright so there you go I’m absolute. Now we’re gonna play around with the positioning of this element. So I’m gonna go ahead and make sure that this is static and I’m gonna make sure that my section is also static. Okay and I’m gonna say save and then this box that is absolute position absolute. There you go and now I am going to give it coordinates top zero. Okay. Now it’s way up there.
0:17:16
Left zero way over there, but watch this right here. You can give it what seems to almost be conflicting coordinates. How can it be top and right and bottom and left all at the same time? What is going to happen? Well, poke the box, see what happens, put in values. Watch this. It covers everything because that box can stretch, right? So that box can easily just fill the entire screen or watch this. I’m going to go to the, here’s our absolute position right here. This div, I’m going to go to the container above it and I’m going to set that container to relative. Now in your mind I want you to imagine what’s about to happen. What is going to happen when I make that container the relative parent of this absolute element when that absolute element has top, left, bottom, right, coordinates all of zero. What’s going to happen? What’s it doing right now? Now what’s it going to do to this container? So I’m going to set that container to relative and look at that.
0:18:26
It fills the entire container. Now a minute ago, this should clue you in too, okay? A minute ago we added an image. And you remember that when we set that image, okay, we’re gonna go select our image, here we go, insert. We’re gonna set this to absolute. Notice how big the section is, okay? Now I’m gonna go style, position, absolute, and suddenly look at this, we’ve got stuff overlapping, we’ve got the section shrinking.
0:18:55
Why did the section shrink? The section shrank because it believes there’s no longer anything in it. There is no content in this section according to it because it can’t really see this absolutely positioned image because the image is not position relative to the section. It’s just absolute. It’s just kind of floating out there, right? So we have taken the image out of the stacking context. The stacking context is what made the section bigger because the image is the only thing that exists there. And with the image removed from the stacking context, the section just shrinks. It’s like, hey, I don’t have any other content forcing me to grow, so I’m not going to grow. It’s just going to go back to exactly the way that it was.
0:19:38
All right, so I’m going to go ahead and delete that now. And now let’s play around again with this. And this is kind of what you see going on here, right? Why isn’t it showing us the entire box? Well, it’s not showing us the entire box because this container is not big enough. Let me view this on the front end. See, it’s like cutting off the bottom of the box because the container was only this big and the absolutely positioned element can’t possibly make it get bigger. Why? Because the absolutely positioned element is not in the stacking context. It can’t force any other element around it to do anything, right? You’ve completely removed it from the stacking context.
0:20:17
So if you needed this section to get bigger, this container right here, you would need to either give it a height. Watch what happens when I give it a height. Okay, we’ll do 20 VH, it got bigger and so did the box inside of it, because the box inside of it is being told, hey, you’re attached to this thing. Go wherever it goes. And because I gave it 0, 0, 0, 0 positioning, which means fill the whole thing. It’s just filling the whole thing. Okay. Now watch, I can also add other elements. So I’m going to add, um, let’s just add a gang of buttons right here. I’m just going to add button, button, buttons galore. The buttons are there.
0:20:56
The buttons are making the container get bigger, but I can’t see the buttons. Why can’t I see the buttons? Because the absolutely positioned element is on top, on top layers wise. The other things are on a lower layer. Okay. So one thing I can do is I could change all my buttons, the index, or I could take my div that’s absolutely positioned and I could say, Hey, you be Z index minus one. Ooh, there’s our buttons right there.
0:21:26
Suddenly we just shifted the layers by doing a Z index of minus one. I told that absolutely positioned container. Hey, you go to the back, you go to the back of the line, everything else comes before you. And so now we can see our buttons and the buttons guys is what was making the container grow, right? If I remove buttons, the container gets smaller. If I add buttons, the container gets bigger. Why? Because these are statically positioned and they will force other things to do certain things like, Hey container, make more room for me dog because there’s more of us, okay? More of us coming, you got to make more room.
0:22:05
That’s exactly what they will do. The absolutely positioned element does not behave that way. It can’t tell other elements what to do. Nothing else is influenced by the absolutely positioned element, okay? So that’s absolute positioning. So we’ve covered relative, which is basically an attachment instruction, right? And for the absolute element, it’s just going to say, hey, where’s my relative parent?
0:22:30
I’m going to attach myself to that relevant, that relative parent. We covered fixed positioning, which attaches itself to the viewport. And it says, hey, I don’t care about any other elements on this page. I’m going to exactly where you tell me to go relative to the viewport. And even if the person scrolls up and down, I’m going to stay right here, Jack.
0:22:50
I ain’t going anywhere, okay? Now with position absolute, there’s one more thing, and this might blow your mind. Remember when I said that it looks for its closest relative parent to attach itself to? I kind of lied. I kind of lied to you because I wanted to simplify things, but now I’m wrapping back around and I want to make sure that you really understand this, okay? So to illustrate, we have to illustrate this, one, to prove it to you, but just so you can see it happening in real life. Okay. I’m going to do a BG base ultra light on this. You can kind of see that container a little bit better.
0:23:23
I’m going to add an image inside of it and this time we’re going to make the image small. So we’re going to do select image. We’ll grab this one. We’ll do like a width of 24 rim. There you go. That’s a, that’s a good size. I’m going to take the container itself and our height is going to be 50 VH. And you see, wait, am I on my, oh, I’m still on the image, sorry. Let’s go grab the container, try that again. Height of 50 VH. All right, now the container is behaving.
0:23:54
And I wanna set this to relative. Now, I said absolutely position elements, this right here, and we’re gonna do this. Here’s your quiz. I’m gonna set it to absolute. Actually, what I’m gonna do first is bottom, zero, right, zero. What’s gonna happen, here’s the quiz. What’s gonna happen when I set this to position absolute? In your mind, where is this image about to go?
0:24:18
Three, two, one, absolute. There it is. If you got the bottom right corner of our gray box, you were correct. And this is exactly what I explained before. This is the relative parent. So it’s positioning bottom right to that relative parent. But here’s the key. When I said absolutely positioned elements look for their first relative parent.
0:24:39
What you really need to know about absolutely positioned elements is they look for any parent that’s not static, any parent that’s not static. So check this out. I’m gonna take our section and we’re gonna go 200 VH on that. Oh what am I doing? I’m not adding a class. I don’t want to add a class here. Section height 200 VH. There we go. So this section actually goes way down here. Now watch this. I’m gonna change our little container here to position sticky. Bam. Give it a top zero. Now, look what’s gonna happen. I’m gonna scroll, attach, it’s attaching, it’s being sticky all the way down the page, but look, our absolutely positioned image is still just chilling.
0:25:29
It’s like, hey, I got nowhere to go. I’m with my parent, it’s cool. Because it doesn’t, you can use anything other than static as a position for this parent, for this absolutely position element to attach itself to. Watch this, instead of sticky, we’re gonna go fixed. And I’m gonna say top left, okay? So now our container is fixed to the top left. I’m gonna scroll, look, we’re still good. This image is still just chilling.
0:25:58
Now, what if I went back to position relative? It’s good. The box popped back to where it initially started but hey check this out image still chilling. Last one absolute. Can an absolute child have an absolute parent? Well yes it can. Check this out and now I’m gonna give it maybe a top coordinate of 2m and a left coordinate of 5M, we can put that box wherever we want to, this child absolutely position element is still just chilling. Because in reality, it attaches itself to any parent that is not static.
0:26:40
So you can use absolute in absolute, absolute in sticky, absolute in fixed, all of those will absolutely work. Now what we need to look at is position sticky. Okay. So for this, I’m going to get rid of all of this stuff. We’re going to start over with a brand new section and I’m going to take this container and I’m going to turn it into a grid real quick. So automatic CSS utility classes for the win. We’re going to go grid one, two, that’s going to give us a one part to two part grid.
0:27:10
I’m going to say grid L one. So the L break point is going to change to one column. Everything’s going to stack on top of each other. And I am going to add our image over here and then I am going to add an image. First I’ll add a block over here. None of this stuff really matters, guys. I’m going to add an image in here and I’m just adding a block to collect these images. We’re going to create like a sidebar situation because a lot of you want a sticky sidebar and a lot of you run into a really big problem with sticky on mobile and I’m going to show you how to fix it. So not only are you going to learn how sticky works, you’re also going to learn how to fix one of these common problems with sticky behavior. All right, so I’m going to go ahead and put in an image here.
0:27:55
We’ll just do the girl surfing with the surfboard right here and we’ll just stick to all the same images we’ve been using. Where was the other one? Here we go. All right, and then in this container, in this grid, I’m gonna also add a gap of XL. So this is effectively our sidebar here, and then we’ve got our main channel of content right here. I know it’s boring, it’s all the same content, but whatever. And we’ll do a content gap, and that’s gonna give us a gap between all of our images.
0:28:23
And I’m just gonna go ahead and hit save, and we’re gonna view this on the front end. Okay. Here’s what we got. Now I want this to be sticky and we’re going to see exactly what sticky does. Okay. So I make this sticky. I’m not going to use a sticky class. Let’s go down to, so you can just see it like natively happening in bricks. I’m going to change this to sticky. And then when you make something sticky, and actually bricks tells you right here, set a top value to make this element sticky. If you change it to sticky and don’t give it a top value, it is not going to work. It doesn’t know what to do.
0:28:57
So I’m going to set a zero here and we’re going to go and hit save. All right, now I’m going to go refresh and we’re going to start to scroll down the page. And wow, look at that. That’s fairly cool, right? So what is position sticky exactly? exactly. Position sticky is basically a normal element. It just looks normal, but when the browser contacts it like that, it becomes position fixed. So it’s like an in-between kind of positioning. It’s like, hey, look normal, look cool, right? Nothing to see here, but when the browser comes and interacts with you then switch and become position fixed and that’s exactly what it’s going to do but but but but but but it’s not completely position fixed and I’m going to show you why and this is the key to solving one of the big problems that people run into with sticky elements because remember I told this grid to stack into one column when you get to the L breakpoint.
0:30:01
And that’s exactly what just happened. But the question is, what about that sticky behavior that we had? So I’m going to start scrolling. Uh oh, uh oh, uh oh, we’re covering up our other content. Well, this is a no go, right?
0:30:15
Okay. So what do we do? Do we turn the sticky off at a certain breakpoint? Like we turn it on here, we turn it off there. No, you don’t actually have to do that. What you should do is just build the structure of your page properly from the beginning. This is an improperly structured section right here or container being that I know I wanted this to be sticky to begin with.
0:30:43
Okay. So this image is existing as a cell inside of this grid. Now what a sticky element will do, like its superpower is it will stop being sticky. Effectively it’ll stop being positioned fixed when it reaches the bottom of its parent. Okay. So all of these items are in this main grid right here. There’s actually only two elements in the grid. I’m going to, um, collapse this. The only two elements that are in this that are cells in this grid are an image and a block. The block contains all the other images but it’s effectively the parent and it’s just chilling in this grid along with the image okay. So the image being that this block forces the grid to be very high this image will stay sticky until it gets to the end of this.
0:31:38
And I’ll prove this to you by creating more sections on this page. So there’s a bunch more sections and now let’s see what happens as we scroll. So I’m gonna refresh here. So it’s sticky, sticky, sticky, sticky, sticky. We get to the bottom of the grid. Oh, we leave it behind. We keep going down the rest of the page. Why?
0:31:56
Because the parent container ends where this last image ends. And this sticky element, even though it’s behaving as position fixed, remember position fixed will just stick itself to the browser window regardless of how long the page is. This is acting like it’s position fixed, but when it gets to the end of its parent container, it’s like, sorry, I can’t, I can’t go any further. I can’t go any further. So it’s almost like an absolutely positioned element in the sense that it’s behaving relative to its parent, but it’s also position fixed at the same time. But when that parent runs out, so will the sticky behavior. And that is actually extremely powerful.
0:32:36
And knowing that what we can actually do is build this little grid with the sticky sidebar properly from the beginning. So watch this. To get this sticky element to behave exactly the way we want it to and logically even when we stack elements on top of other elements we actually need to give it a parent we can’t just allow this sticky image to be free-floating in this grid because it’ll cover up the other elements in the grid remember a sticky element stops where its parent ends okay so what I’m actually going to do is instead of this image being actually we’re gonna leave the image sticky we actually want the image to be sticky, but what we’re going to do is we’re going to wrap it with a div. So I right clicked it and I gave it a wrapper. Okay. It disappeared for a second.
0:33:23
Now it came back. You can see over here and we’re going to call this sidebar. Okay. Now, one thing I want you to notice, I’m just going to hit save the image. Let’s check. It is still position. Sticky top zero. I’m going to refresh and I want you to watch something. Uh oh, no more sticky. Why not? Because the image is sticky, but it’s inside of a parent element, a div that’s not sticky. And that div is only as big as the image.
0:33:52
The sticky element is not going to come outside of that parent, okay? And this is what we want. We want a parent that can effectively keep this child in check, okay? So here’s what we’re going to do. We’re going to take our grid and now we use a stretch, a flex box control of stretch. So when I tell this grid to stretch items, it’s going to take that sidebar and it’s going to stretch it all the way to the bottom and look, see the green, this is the sidebar.
0:34:22
It’s stretching all the way to the bottom. And now the image actually has a channel that it can move up and down in, right? So you’re saying, but Kevin, what does that matter? You just got the same, we had this effect before, but no, no, no, my friend, because this is how stretch works. Stretch is only stretching this parent because it’s next to other content that is taller and it’s trying to stretch to be itself. But when this cell stacks on top of the other cell, it doesn’t need to stretch anymore.
0:34:56
It’s just gonna be the height of the image, right? Cause that’s the only thing it needs to actually wrap. So watch this, when we go, I haven’t changed anything, right? When we go and we look at this on mobile, there’s our stacking to one column right there. Look at this, no stickiness. It’s not covering up our other images. Why? Because the wrapper that was stretching when it was like this look now that wrapper is stretching all the way down here Because it’s like oh there’s content over here that I have to be as tall as that content, right? I got a stand-up talk I’d be as tall as this other content and it allows a channel for the sticky element to go up and down in but when But when everything collapses, that wrapper is like, hey, there’s nothing next to me.
0:35:42
The only thing I have to do is wrap this image. That’s all I have to do. And that’s exactly what it’s doing. And therefore, the sticky image has nowhere to go. And so you don’t see it move at all. There is no way to know that that image is sticky. And now this grid is behaving like a normal grid. So many people run into that problem. So to recap what you want to do with your sticky elements is give them a parent wrapper and then you can stretch that parent wrapper so that your element is sticky right and you get a cool effect like this too. Let’s go ahead and just duplicate that section right here okay and then let’s save and let’s go back to the front end and let’s check this out. So look I get one sticky comes down it’s gonna stop and the next sticky can start and then it’s gonna stop and you could keep you probably have seen that happen on on some websites before it’s a pretty cool effect but effectively what you want to do is not just use a sticky element right give it a parent that effectively acts as a channel that it can go up and down in and then when the channel collapses, the sticky has nowhere to go.
0:36:54
Thus all of your stickiness goes away and you don’t have any content overlap problems on your page. Okay. All right. So we’ve talked about, let’s just recap real quick. We talked about static. That’s the default for everything relative is relative to the static position relative to where I once was. Okay, absolute is relative to my first relative parent. Where is my relative parent? That’s what I’m positioned relative to. Okay, fixed is where’s the viewport? I’m going to be positioned relative to the viewport.
0:37:29
And then sticky is, hey, I’m just going to act like a normal element. I’m just going to chill. Nobody’s going to suddenly become fixed. But my other special power is when we get to the bottom of whatever my parent is, I’m going to stop being sticky at that point. I’m just going to go back to being normal at that point. Okay. So that’s a rundown of your basic positions here. The other thing obviously you should know the top can be more, it can be more than zero if you want to. So if you say 2M, it’s basically going to create a 2M buffer between the top of the browser and your sticky element. Okay? So this stuff is very, very, very powerful.
0:38:09
I wanted you to, let me go back to camera here. I wanted you to get a firm understanding of the basics of positioning elements on the web, what each of these does, how they interact with each other, how they’re different from each other, just so that you can once and for all solve your attachment issues. So many beginners and intermediate web developers have attachment issues. They’re nasty attachment issues and we got to get rid of those attachment issues. Okay? You should have a nice healthy relationship with all of your elements and all of the work that you do. If you have any questions about this stuff drop a comment below. I am happy to jump in and help. Hit like, hit subscribe.
0:38:49
If you love this content pay with the likes, pay with the subscriptions, pay with comments and then if you want to pay with actual dollars, you can drop down, grab the inner circle link and join my inner circle where there’s content like this for days all about web design and development, all about agency, business, growth and development, money, finance, marketing, everything that you could ask for, scoping projects, pricing projects, scoping templates, everything that you need to be successful is in that inner circle, okay? So join me, I’d love to see you on the inside. I am out, peace.
