What am I doing wrong with z-index and why can't I get the shoe picture right next to the fullcard?

I’m fooling around with z-index and can’t get the h2 heading in front of the image of the dodge challenger. (I purposely have the image overlapping it so I can test z-index.) All though this isn’t a huge issue, I’d very much like to learn so that someday when I absolutely need to accomplish this, I can.
my code : https://code.sololearn.com/WM9dwXF7xfZM/#css

Hello @lord_of_hotwheels , in order to work out the z-index value you need to give the position value, in your case giving a position: relative; to your h2 element would fix the issue with out changing you z-index value.

Thank you! It worked. I understand that position: relative; acts as a default reference sometimes, but I don’t fully grasp the concept. When I stated the h2 position as relative, it was relative to what? The section it’s nested in?

you are not getting your picture right next to the fullcard text, it is because your fullcard text container element (i.e. p) is a block element, here is a fix to your code:

.fullcard {
   border: 1px solid #ccc;
   width: 150px;
   height: 200px;
   padding: 10px 15px;
   margin: 50px; /* fixed */
   text-align: justify;
   float: left; /* added */

#nike img {
    height: 150px;
    width: 200px;
    float: left; /* added */
    margin-top: 50px; /* added */
#nike::after {
    content: '';
    display: block;
    clear: both; /* crucial to clear the floating and stretch the parent element to fit the height of its child element */

Hope this will help you: BTW play with the after pseudo element you will get the idea why I added it.

To answer your question: the default position value is static not relative.
When you make an element position relative, you are positioning it relative to its default position (as my level of understanding)

1 Like

ah I see. So it’s static by default, but when I so much as want to make it appear in front of something I am changing it’s position ‘relative’ to where its understood in the ‘static’ world, hence position: relative; but how exactly did I know I needed to change the h2 to relative rather than the image?

Every time you want to give your elements a z-index value you need to change their static position, that is the simple trick I use

Thank you very much for your help! I have been toying with the ::after selector and I was trying to google about the display block and clear functions. Please explain them to me if you would like

::after and ::before are pseudo elements those can be added to every element with opening and closing tags using CSS.
In HTML there are 3 types of elements classified based on their display behavior, those are block, inline-block and inline

  • block elements take up the whole width of your browser viewport. if you wanna put two block elements side by side you won’t be able to achieve that without any additional CSS code like: float, flex, grid something. Even if their internal content isn’t enough to stretch the whole width, they still stretch themselves to take up the whole width. Examples: div, p, section, header
  • inline-block and inline elements behave the same way, they took the space they want and leave the rest of the space for other elements. if you wanna put two elements side by side without any CSS code you can in both of inline-block and inline elements.
    But there is slight difference between inline-block and inline elements. the difference is: if you wanna give any padding or margin to your inline elements you won’t be able to achieve the effect you were looking for cause inline elements by default set to not accept any additional spaces other that their content. With inline-blocks you can add any padding or margins.
    Eg. inline: a, span
    inline-block: img, input