Application and positioning of the layer (absolute positioning and relative positioning)

The random location of the layer of the characteristics of Web designers to bring great convenience, but at the same time brought a certain amount of trouble. Why do you say that?

As we all know, in order to allow the Web page to automatically adapt to the resolution of the user settings, in the process of making the Web page, people used the percentage of the setting, so that all the elements of the page from the new layout, to ensure the original format. But if you use layers on the page, you will find that when the browser size changes, the position of the layer has not changed, resulting in a mismatch between the other elements, and the page becomes cluttered. And we are not able to force users to use a specific resolution, then the only way to make the position of the layer can be like a table to change the size of the browser to reposition, which requires the rational use of relative positioning and absolute positioning.

　　absolute Positioning (position:absolute): The default positioning method for the layer, which is to calculate the positioning value for the edge of the upper-left corner of the browser.

　　relative Positioning (position:relative): The position of a layer is set relative to an element, and the position of the element changes, and the position of the layer changes accordingly.

Compared to the two positioning methods, it is not difficult to find that the use of relative positioning of the layer is really the way to achieve the designer's ideas, so fully mastered the layer of typesetting.

So, is absolute positioning any use? Of course, when all of your pages use the layer to typesetting, and the page is using the default left place, then use the default absolute positioning method can be convenient typesetting, improve the design efficiency.

In Dreamweaver, the inserted layer is the absolute (absolute) positioning method, but the insertion method is different and the effect is different. As we already know, using the menu to insert the layer is not positioned coordinates, only if you use the mouse to drag the layer to change its position, will not write the coordinate value. The initial position of the dragged layer is the coordinates of the start of the mouse action.

Make a clear concept: the layer assigned the coordinate value by Dreanweaver is the layer that is absolutely positioned at the edge of the browser. A layer with no coordinate value is a layer positioned relative to an element!

So the simplest way to set a relative positioning layer is to: selecting the position of the insertion layer, such as a cell or somewhere on the page, places the cursor at that position and then selects Insert-->layer, where you can create a fixed-size layer that is positioned relative to that position. Note that the layer created in this way, you can only resize it using the mouse, you can never move its position! That is, there is absolutely no numeric value in the position bar (left top) of the layer on the property panel.

In many cases, the placement of the inserted layer is not necessarily accurate, especially Dreamweaver is not really WYSIWYG software, Web page layout only to display in the browser can really see the performance of typesetting, so the above mentioned method is too simple and easy to go wrong. This time, you need to give the layer a position of reference, let it really do relative positioning.

A simple reference can be a parent layer, where you insert a relatively positioned blank layer and insert the layer you really need in this layer, which can be arbitrarily dragged to change position. However, after all, in the Web page to insert a blank layer, I think it must not be professional web designers want. Below we introduce a layer that uses CSS to achieve true relative positioning.

We need to first set a CSS Class to define how the positioning is relative:

. CEng {Position:relative}

Then, give the reference you need (can be table,tr,td ...). A CSS property is this class. The browser then creates a new coordinate system with its upper-left corner as the origin. Then insert the layer at the lower level of the reference, if you need to change the position of the layer, you can enter the value of the left top directly in the Layer's property panel (you can't drag with the mouse), remember that the coordinate origin of this value is the reference you specify, Rather than the edge of the browser (when edited in Dreamweaver, the layer looks like it is absolutely positioned on the edge of the page, but in the browser it is definitely the reference you specify).

Many friends use the layer is to wait until the dynamic effect, such as using a timeline to allow an object to move up, increase the dynamic of the Web page, then the relative positioning of the layer can also be movement? Of course the answer is yes. Because the object's two locations need to be dragged to change the position, it is not possible to use a simple layer positioning method, but if you use CSS to set the effect of relative positioning, then it is completely achievable. Just be aware that when you define the initial and ending positions of the motion, you still can't use the mouse to drag, and you can only enter values for left and top.

The use of the original layer is not very complicated, but I took it as a separate chapter, the reason is that the positioning of the layer has a certain degree of difficulty, I hope friends have seen the above introduction, in the Dreamweaver more than a few times, otherwise it is easy to appear problems.

Ok! So much is said about the use of layers.