Love Comes With a Little Jealousy

Being an artist, the first thing I learned in most of my early classes was a lesson on composition. Sure it may have been worded in different ways like creating an “edge of the frame assignment” or simply reminding everyone to think of where we want our drawing (or what not) to sit on the page. For one I believe that pencils usually come in handy to sketch out what you want to draw before you crop someone’s head off r something like that. However, at first I found accomplishing this task of creating a good composition on a webpage virtually impossible. So I searched and searched for that one little thing that might make my job a little easier. So this is the time I tell you all of my love affair for z-index. Simply put z-index allows you to overlap things and assign different numbers to divs to tell them which one should be behind the other. You can use negative numbers and positive numbers, the smaller number is the one that goes behind, the larger in front.

An example of css using  this….



            width: 100%;

            height: 200px;

            background-color: #E4E4E4;

            z-index: -1;





            height: 30px;

            width: 200px;

            color: #fff;

            position: absolute;

            left: 175px;

            top: 15px;

            z-index: 3;



In this case the navigation button would be on top of the header picture. This may seem very simple, well it is, but there are two things that I have found that could end up being a problem. Onr, sometime sometimes my divs get jealous of others with a higher number z-index, they won’t let believe me that I don’t choose favorites. Two, if a link is under something there is a very good possibility that the link won’t be able to work. This could be due to the fact that the links get jealous and refuse to work, or that you can’t click on them if they are covered, even if they are covered by something that is a PNG and does not look like it’s covering it. So, if you’d like to experiment with z-index to get those compositions perfect, treat her nice, and have fun

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s