Natick High Web Design

The purpose of the Z-Index is to edit the order in which divs appear on a website. When thinking about a 3D shape, there is a width and height, which is clearly evident in a divs creation. However, web designers need to know which div will appear first when two are placed one after the other. Not necessarily will a div be in front of another on the Internet if it is simply dragged in front of the other in Dreamweaver. The z-index allows one div to have greater depth than another, so divs can be placed on top or behind one another. For example, if you were to create a colored box within the container, the z-index of that div would need to be higher than that of the container. In order to change the z-index of a div, the designer must highlight a div by clicking on it. Then, scroll to about the center of the bottom page properties panel and click on the box next to z-index. Then the last step is to change the numerical value of the index by typing in any number.

Often designers change the z-index by multiples of 10 because there may be divs that they want to go back and create later. That way, they can go back and add a new div that appears in front of one major div but behind another.

Through code a designer can go within the div code and type in z-index=1, or whatever number necessary for that div.

 

Z-Index

class photo 1
class photo 2
class photo 3
class photo 4
class photo 5
class photo 6