Class is in session!

Lets learn about posistioning and z-index CSS!

Written: 11/1/2022

If you've taken a peek at my coding, (Even right now!) you've likely seen a little thing called "position: fixed", "position: absolute", and "z-index". Basically,
"How do get the object to be on this certain area??" and "How do make object go in front of other object??"

Tis rather simple! Lets learn together :]

Also! To see the code better, click on the image! Here we have a blank page, with a little 98-tan as our test subject! >:] But don't worry, she won't have her arm replaced with something strange. (For now..) We're going to be using her as our coding example for posistioning.

Now, lets say we want 98-tan to be on the BOTTOM of the page! And a little to the right. We have two ways of doing this.
You can either put these values in the actual (img) tag itself, or create a div. For this, we'll be putting the styling in the (img) code.

WOA! Now 98-tan is at the bottom right of the page!
Notice the "bottom: 5px" or "right: 5px" value? The more you set this higher, the farther away it will become. So if we set it to "bottom 15px" it will be farther away from the bottom!
You can also change "right" to "left" and "bottom" to "top" of course :]

Now, something important to note about "fixed" and "absolute". When you put the code as "posistion: fixed" it means that EVEN when you scroll around the page, the image will always stay there no matter how much you scroll. While "absolute" will have it stay in THAT place even when you scroll! You can see this in action on this very page, the 98-tans at top will always stay in that posistion because shes "posistion: absolute", while the "navigation" window to the left will scroll along with us because its "posistion: fixed"!

Eh? A challenger approaches?

Oh! Its Multi! Shes here to help us with the second part of our tutorial, z-index!

Now, after getting Multi into posistion.. we notice a strange issue. Shes in FRONT of 98-tan! We want her behind 98-tan.. a very simple fix!

In the style for 98-tan, lets give her the "z-index" value. When we put the number higher, it means the code will put her higher in the "layer". You can do quite alot of layering, so get creative!

Huh.. I guess thats it! I hope this inspired you to do quite alot with putting fun things on your page :] You can put anime girls sitting on top of boxes, anime girls sitting on top of photos, anime girls on the bottom of the page.. Many things! Esp when combined with layering z-index!

I hope you found this helpful, toodles! -Beau

Navigate