Position Tags within a Card

[00:00:00]
>> Kevin Powell: So to show this in a bit more of a real-world scenario, we're going to add a new section to our project. This is the updated design for the new section, and there's one piece of this that sort of stands out as a good use case potentially for position absolute, which is the little tags that are there, the yellow, bright yellow things, just because you can see they're sort of, we have some padding probably coming around on these elements.

[00:00:23]
These other ones are coming out of the flow a little bit and want to stick them to a specific place in the parent. So anytime I see something like that is when I start seeing or thinking that position absolute would be the right way to go. For this, to follow along, we've given you the starting code if you want to catch up to where we are now. I made a typo. Oh no, I didn't. I've given you all the content if you just want to write the HTML yourself.

[00:00:49]
So card one, there's the content, card two, there's the content, and so on. I've also given the images, so I'll save those in a second. And finally, if you'd rather just follow the structure that I use, but do the content yourself, you can. This is the general structure for each one of those cards that I'm creating. And if you'd like to skip ahead a little bit, which was what I'm going to do, I'm just going to copy all of the text that we have here and bring it in directly, just so we don't have to write at all.

[00:01:18]
I'll explain a bit of the HTML structure as we're going through because the order of the elements here might seem a little bit strange and I want to talk about that as well. Another reason why sometimes positioning can be useful when it comes to the ordering of the elements. So the very first thing I'm going to do is go to the images and just download them because we do need these images. That won't take too long.

[00:01:38]
Make sure we're in the right spot. If you're getting the files from the GitHub repo, you'll already have them, so you won't have to save them this way. Doesn't take too long to do though. I've already named them the same way that they're named in the HTML that I provided, so that will make our life a bit easier too. So we've got all the files that we need, and I'm just going to grab this entire section of content.

[00:02:09]
Jump on over to VS Code. I'm going to go full screen in VS Code for a little bit until we start working on the design. This could go anywhere. I didn't tell you where to put it. I'm going to put it after the three-column section. So we have the wrapper, we have our three columns. I can stay in the same wrapper. The background color is still white, so right after that three-column section, we can come in with this.

[00:02:34]
Let's go look at the design actually, really quickly. It's sort of just like the different courses that are available. So if you need to have a title here, I don't know if we're going to need one. We'll start with just creating a section. I used a wrapper. I'm just trying to think if I want a section or a div. We can just say div to make things a little bit more clear. Section would be completely fine though.

[00:02:57]
Semantically speaking, actually it's interesting, a section doesn't do anything extra unless you link it to a title using an aria-labelledby, so they're essentially the same thing anyway. And I'm going to paste in the content that I brought over. So the div here, we don't even really need that div now that I think about it, but we have it there. I'm using the three columns that we already created.

[00:03:22]
You don't need to create a new set of three columns, it's already working. If you'd prefer to use the auto grid for this, we have six cards, so that would work completely fine. And then each one of those, I have a div with a title, a tag, and a description. And for now I've commented out the images. I'm providing the images this way instead of background images, which we'll talk a little bit more as we go through this as well.

[00:03:47]
This is on purpose. We could easily do this with a background image, so if that was when you saw it, use the background image right away. It's an image behind text, makes perfect sense and there'd be nothing wrong with that. When we bring in the images, I'll talk a little bit more about why I've decided to actually include the images here in the markup, but it'd be easier to create our layout first without them and then add them in a bit later.

[00:04:10]
So I'm going to save that and then go take a look at what that's given us, which is down here. I have, we used our three columns, we have those coming in with three columns each. Nothing too complicated. Each one of them does have the class, of course, on here. So let's come into our CSS, find somewhere that we can write that. This is again talking about organization. I try and do more general things then work my way into other ones.

[00:04:38]
Like a hero is very specific. These course cards potentially could be a generic card and you have other cards somewhere else and it becomes reusable, but because of our little title thing, like the tag, I feel like they're very specific, plus the images are very specific. So because of that, I think coming in with something very specific is completely fine. So I'll come right after our hero stuff and write course.

[00:05:03]
For now, I'm just going to do a background of black, since we're going to change it. I just want to be able to see them, and I can see those black cards coming in. Perfect. Next up, we want to, well, the color on these needs to be changed. Let's go look at the design. All of the text in them is white. OK, we can rely on inheritance or something like that. I don't have to select the different elements there.

[00:05:32]
I can stay on the big piece on the outside and just declare a color. In this case we'll use the variable since we have one, color neutral 100, and that color is inherited by the children. I don't have to do any more work on that. When we have a background color or background image type thing, usually you also want some padding. I'm going to move that up, color first, background padding. How much we want on there?

[00:05:58]
If I don't know how much padding I need, I tend to do just this default of one rem. It's 16 pixels. It usually doesn't look too bad. If I feel like I need a bit more, I can boost that number up a bit. If you're using 21 pixels, 16 pixels, those are also completely fine, or if you wanted to go back to Utopia, use their spacing calculator, get some custom properties that are actually fluid. That could be another option for you as well.

[00:06:24]
Now there's the interesting bit. I need these tags to go to the top. Now in the design, the tags are all the way up there. So if the tags are at the top, why would I have the tags as the second piece in my part here? Wouldn't it make more sense to put the tag on the top there instead of having it down below? Does anyone here? Yes, there's an accessibility thing, so it's the title of it instead of the tag is first.

[00:06:56]
Yeah, exactly. This is when you're using your headings, this is creating the structure of your document. If I put this tag first, the structure of the document, that would mean this tag is part of this H2. So what's inside the course strategy, and then you'd have this next section that's a subsection of your weight inside of the H3. It just from a semantic point of view doesn't really make any sense.

[00:07:23]
The strategy belongs to this heading. The heading is creating a new piece, a new structure in it. I always relate headings to creating a table of contents in your document. H1 is the title of your book. H2 is the chapters. H3 is the subchapters of those chapters. H4 is the next step that goes into there. You can look at your document outline. There's tools that can do that. The dev tools might even be able to create it for you.

[00:07:48]
We'd have to check for that. But this belongs underneath this because it's part of that card. So I'm including it there and then I'm going to use CSS to move it to visually match the design that I have. So let's start with that. Always go with quick wins right away. I know I can move that, we just learned about positioning. So I already gave that the course tag. Let's come down here, of course tag, start with the background just so we can actually see it.

[00:08:20]
It's going to stand out for us, background. I always tell people to not use the shorthands for background. I like using the longhand, and then I always forget myself, but we'll do it the long way. The only reason I do that is to prevent any conflicts from running into each other. If you have a longhand somewhere and then the shorthand after, the shorthand will always overwrite the longhand. Vice versa isn't the case, because you're being specific on one of the properties.

[00:08:51]
So background color on here, we had our color accent. I'll just guess that it's the 400. I'm also going to comment out this section just because my preview keeps jumping up and it's a bit jarring that does that every time, so we can just keep this on the screen a little easier by commenting that out. I think we actually want the 300 to make it a bit more yellow. We're still jumping up, but we'll survive with that change.

[00:09:23]
So we have that. The color of the text is clearly wrong. Again, start with your easy wins, color. Var, color, neutral 900. We have a background. Anytime you have background, you probably want a little bit of padding. We don't need too much in this case. That might even be a little bit too much. Top and bottom, I want a bit smaller. I can reduce that down. Now, as I said, we can pull them out of the flow.

[00:09:50]
So let's go and do that. Organization with CSS rules comes down to you. Some people like alphabetical. The advantage of alphabetical is you know, if you have two of the same property that they'll be right next to each other, so then that order thing comes in. You don't have them separated by a lot. I like organizing by what they do. Text properties first, I haven't been doing that consistently, but text colors first, background, padding, margin, layouty stuff then, and then I come in with my positioning usually afterward.

[00:10:22]
So position absolute. I know I want to pull it out of the flow. So, perfect, they're out of the flow. Top, I don't know, 10 pixels. They weren't glued to the top, so I'm going to do a small offset, but I know on the left side I wanted it to go all the way to the left, left of zero. Where did they go? Top, top left of the browser. Yeah, they're all the way up here. One of the fun things in position absolute, we always forget that we need a containing block.

[00:10:53]
So if you use it, no panicking, just remember, oh, I forgot to define a containing block. How do I create a containing block? I go on any of the ancestors. So it could be the direct parent, sometimes it might be a bit further out, and I give that a position of relative, the easiest way to create a containing block. And now they're actually where I want them to be. Now there are some problems with this right now.

[00:11:22]
They're covering the text that's here a little bit. If you look back at the layout, you know, I want a lot of space on top of these instead. How could I do that? What's an easy way to add that space on the top there? Any suggestions? See some thinking going on, but I don't see any. Lots of ways to do that. You could add some padding to the top of the, before the H3. Yeah, so we could add some padding at the top of those.

[00:11:46]
That's more background, we use padding. That always want that to be the first thing you think of, because there's other ways to try and manipulate. You could come in and give these a size, right? You could say I need them to be taller. So not the course tags, but I could say that they're not tall enough. I need those elements to be taller. So then you come here and you say these have a block size or you're using a height.

[00:12:11]
Block size, and then you have to guess, like, is it 300 pixels, maybe? Oh, now they're bigger, but how do I get the content to go down to the bottom of them now? OK, I could use like a flex or grid and then use my alignment or justification to push them down. It would work, but it's a lot of extra steps. We're defining a size. That means there's the potential for overflow, so then maybe it's a min block size.

[00:12:35]
It just becomes a lot of work and a lot of thinking when all I have to do is more background, more padding. So my padding on the top, I want to be different. You have two choices in that case. I could leave the shorthand here and then overwrite only the top. I'll do the block size since I've been using relative. Block start, sorry, since I've been using logical properties, and I could just make this one bigger.

[00:12:59]
I had rem there. You can mix units, or I could come in with a three rem and try and find the amount of space I want, or I could come in with like 75 pixels, whatever would work for you. You could also just use the shorthand if you'd prefer, and the first one would be the top, and then the next ones would be the other sides going around clockwise. If I'm doing one that's different, I often do this, where I just set the shorthand, it's easy, and then I come over with the one that I want to be different, and it works well.

[00:13:33]
75, let's just do 85 to give us a lot of room there for our image to look a little bit nicer. It's a bit squished now just because my screen's a bit narrow. If we're on a wider screen, I think the layout would look a little bit nicer. If I take a look, my font family in there is a bit different. I think I actually have a bit more padding. I see a bit more space there, so what I would suggest is try not to aim for pixel perfection either at the start.

[00:13:57]
Try getting things to start working, and then you start trying to get a little bit closer. I purposely didn't include any specific spacing or sizing when I provided this design, because the last thing I want is people measuring things to try and get exact numbers. Especially when you're learning, eyeballing things is a good skill to develop and just figuring out the sizes that you want. So maybe a 1.5, again, you could change it to like a 16, just to increase the size there a little.

[00:14:31]
They're stretching. I have a few little things going on, so we might actually have to figure out a way to push them to the bottom. We can come in and do that in a little bit. Let's fix this tag though, and get that finished up. So on that tag I mentioned the font family was different. Font family would be my var, font family, and I think I called it accent. Find out, yes, and the font weight was 700.

[00:14:59]
Perfect. So we've got that set up and positioned properly, and now I could come in on each one of these and add a background image. One of the problems with using background image is if all the background images are different, that sort of sucks, because then you have to come through and assign a different class to each one of them to then set the different background image. There's another way you could look into nth-child and select the different nth-child.

[00:15:22]
In this situation, that would be really fragile because the order of them all of a sudden would become really important. Then you're trying to come up with the class names for them or maybe you have different ways of doing it. This could be dynamic content. If this was dynamic content, you could be inserting the background image with JavaScript. The cards coming in, the text is being inserted and using JavaScript to insert an image using an inline style.

[00:15:55]
These are all options. For me, I like having images as actual content when possible, so let's bring these in. There are two reasons images as actual content is usually a good idea, not always. Background images definitely play a purpose. You want to ask, is the image purely decorational, or does the image add content to what you're creating? If it's actual content, the advantage that real images have is you can have alt text on them.

[00:16:21]
And so if the image breaks, you don't just have a black box, you'd have a description of what the image is. And alt text, you know, it can help from an accessibility point as well, where you're providing context of what that image is. If it's a purely decorational image, again, it could be a background image, and you're allowed to leave alt text blank. So if you have an alt attribute with a blank or just an empty string here, that's letting screen readers and assistive technologies know that that's just a decorational image and they're not going to worry about it.

[00:16:58]
But in this case, we're going to treat these like actual content and use positioning. So we're going to come over here. On our course, we need to grab those images actually. So let's go look. I called those, did I give them a class? I don't think I did. No problem, we don't need a class, we can use a descendant selector. We'll use nesting, we've been talking about it a bit. I can say if an image is a direct child of my course, it should be position absolute.

[00:17:31]
Then, well, where do we want it to be? We want to fill up the entire space. So I can say top zero, bottom zero. Wait, if I'm doing all of them zero, why don't I just use an inset of zero? And it's not really doing what I wanted it to do. It's getting there. It's covering the content, it's going sort of where I wanted it to, and this is one of the weird things that happens with images. Images want to stay their natural size.

[00:17:58]
So top, bottom, left and right, it's living within that space, but the image is allowed to do something a little bit different. So we're going to look at two new things here, one new thing. One of them is something that I said you should never do, but we're going to allow it here, which is to do a height or a block size of 100% to get the image to actually grow and fit the space. You might notice a problem.

[00:18:22]
First we can't see our content, that's probably the bigger problem. The other problem is we're stretching our images now, so we're getting it, it's falling apart, it's not looking very good. Other times your image might actually end up being too big, so we can use an overflow for that. We'll come back to that actually in a little bit. We won't do the overflow just yet. Does anyone know though, how can we get this to actually go behind the other content?

[00:18:57]
There's another property that I talked about. Yeah, Ryan. Z-index. Yeah, nice z-index. I appreciate that. So we have a z-index property, and the way that works, I'm going to start by doing it on the tag, and I'm going to come here and I'm going to say z-index. If everybody who finishes this course calls it z-index, the course is a success. I'm going to give it a number. It's always a unitless number, and it appears on top.

[00:19:27]
And all z-index is doing is layering things. By giving it a z-index, we've pulled it up to, we'll call it layer one. If nothing else has a z-index, or if nothing has a z-index, they're layered based on the order they are in your HTML, so the lower down it is, the further on top it is, essentially. So every element will just, if they're going to stack, will stack with the lowest down element in your HTML being the one that's on top.

[00:19:53]
This only applies once you add positioning. The elements that are static will not overlap anything. So if this is a one, it goes on top. Let's come on my image just for fun. Say z-index, and I can give that a two, and then it goes on top because it's a bigger number. Pretty straightforward. So then I could come here and go, no, I want this to be on top. You go back and forth. There's things called z-index battles where you end up not being able and you're fighting and something gets a 999 on it to go all the way on the top and make sure that it's all the way up there.

[00:20:29]
In general, if you are using z-index on like a large scale, I'd suggest having groupings of it, a one here, one, two, three for like some small movements, 10, 20, 30 for like the next level, then you can have hundreds and other things like that. But it really depends on what you're creating, and we'll see in the next lesson, a little bit more on this, where it gets a bit weird at times too. One interesting thing though, with the z-index, I don't actually need one on the tag.

[00:21:00]
The problem with the images, it's in front of everything. I want it to go backwards. It accepts negative values as well. Negative one goes all the way back. It's behind the background, but that's because I put a background color on there, so we can fix that on my background black. We don't need that anymore. There we go. We have them coming in, and they don't look fantastic because the stretched image, we'll fix that now.

[00:21:26]
But we get that idea that the negative one means go all the way back, and you could have negative two, negative three. The same principle works positive and negative, if you need to layer things the other way around. The one thing that we're going to look at now, I have a lesson talking about this in a bit more detail later on, but I want to, I don't like stretched images. So, on the image here, I am also going to give this what we call an object-fit of cover.

[00:21:57]
Object-fit is for images. It's the equivalent of background-size for background images. Don't know why the name is completely different, but an object-fit of cover is like a background-size of cover where it just means we'll crop parts of the image off. So we're telling it it has to fit this very specific size that's not the natural aspect ratio. So instead of stretching it, we'll just crop sides of the image off instead.

[00:22:25]
It's a really useful one that should get a little bit more attention. Any questions so far on that? Yeah, I do. Yeah. So you had a background color and when the, in the case of an image not loading, that's really helpful because your text is white and without the background image, you won't be able to see the text. So, in using this method to create these cards, how would you prevent that? We're going to get there.

[00:22:50]
OK. Yeah, I do have a solution, but it's a very good catch. That's one really important thing. Anytime you do have, whether you're faking a background image like this, or you have an actual background image, if your text is white and your normal background color is white, or if your text is black and your normal, I don't know why it would be that way, but this type of scenario where your text would be invisible if you don't see the image, it's a good idea to have a background color, even if there's a background image.

[00:23:19]
So here, I actually did that on the hero, so say this hero image didn't load. We'd still get that bright color coming in. In this case, maybe doesn't really matter, but it's always a good practice to have some solid color as a fallback, loading issue, slow load times, broken link because somebody updated in a pull request and weird things happened and image got moved, who knows what it is. So yeah, it's always good practice to have both with the color always being the fallback.

[00:23:48]
Images are always, background images are always on top of background colors. So if you declare both of them, it's not because of the order that I declared them here, it'll work the same way either way around. And background images are blocking from a network standpoint. They're not like image elements that can be lazy loaded. Yeah, CSS is, it's one of those things that generally doesn't cause performance issues, but there's a few weird things that it can do, like it's, I didn't talk about imports, but you can import multiple files, it causes blocking along the way.