Let's talk about CSS, baby!

I feel like while studying CSS I have had three starts. My first foray into the CSS world was with Udemy. I then went on to Free Code Camp. There, I felt like I expanded on what I learned. There were some new concepts that I hadn't seen before. I was excited to build on my knowledge. In a group chat, someone recommended trying out the w3school.com CSS exercises. Going through that now, and I'm learning even more things.

I originally wrote the intro to this post assuming I'd chat about everything giving me trouble, but it's already pretty long. So, here are some things that have been giving me the most trouble.

Position

Now, I wouldn't say this is a new concept. Everywhere that I've encountered CSS has covered it at some length. I just can't seem to remember what exactly all of the values do.

position: static;

Static is the element's default position. An element with this position is not positioned in any special way, and we can consider this element to be unpositioned.

position: relative;

Now this position will act the same way as static until you add some other properties. Adding values to the top, right, bottom, and left properties will move the element away from its default location. However, nothing will be placed in the gap where the element originally lay.


position: fixed;

A fixed element will move where you tell it, but it will not leave a gap where it originally lay. These elements are positioned relative to the viewport. So, if you placed an element on the top right corner of the page, it will stay there even when you scroll. Apparently, fixed elements can cause some trouble on certain browsers, so they're not the best to use for cross-browser compatibility.

position: absolute;

Absolute is similar to fixed in that it will stay where you place it. The difference is that it is not relative to the viewport. It will be fixed to the nearest positioned ancestor (so that is an element before it with a position other than static set). If there is no positioned ancestor it will use the document's body.

This website has some great examples of position in use. You can start at this link and click next to see them.

2D and 3D Transforms

2D transforms are a good way to vertically align smaller components of your webpage in a simpler manner than using a Flexbox or a Grid. For example, if you had a child div with text nesting in a parent div container, and wanted to place the center of the text in the center of the container, you can use a Transform to move the text exactly where you want it. The position is relative to its parent container. You'd move the top of the text to 50% of its parent element. That would align the top of the text to the center of the container. But that's where I typically would leave it. However, with Transform, I can use translateY(-50%) to move the text up 50% of its current location. That perfectly aligns the centers of both divs.

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

With 3D transforms, it's a bit less simple. Our screens are 2D. We have a horizontal x-axis and a vertical y-axis. When we want to 3D transform objects we must assume the screen of the computer is a new axis with a Z coordinate of 0. Want to move the object towards you, you should use a positive value. And to move it away we would use a negative value. It's important to remember that these objects do not become 3D. A triangle is still a triangle and will not become a pyramid. We're just moving objects, not performing an illusion. I like to think of this as using the Transform tool in Photoshop. This webpage has a great example of how 3D transforms work: https://www.sitepoint.com/css3-transformations-3d/ and you can use it as a reference.

I'll continue practicing my CSS skills and when I'm feeling more confident, I guess I'll make a part two. I know for sure it will probably include floats and clears, grids, and flexbox. I'm excited to keep practicing these concepts. What's something you're learning that's difficult to grasp, but leaves you immensely satisfied when you see it work?

--Elle xx