The biggest problem when using layers in a centered page is the positioning of the layer. When the display resolution is changed, the position of the layer relative to other centered elements will change. This article introduces ways to keep layers from being misaligned relative to other centered elements.
Absolute positioning and relative positioning
of layers Absolute positioning code for layers:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
Relative positioning code of the layer:
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
In the centered page, insert the relative positioning layer code, and the position of the layer will be in the center of the page. But it became immovable and inconvenient to use.
Insert absolute positioning code. When left and top contain positive and negative values, the layer cannot be centered. When the left and top attributes are cleared, the layer can be centered and there is no misalignment relative to other centered elements on the page.
The difference between drawing layers and insertion layers
. Using drawing layers:
In a centered page, use the code that renders the layer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
</head>
<body>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</body>
</html>
Use insert layer:
In a centered page, use the insert layer code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</head>
<body>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</body>
</html>
Because the code generated using "drawing layer" is not included in the centering code, in order to ensure that the layer is not misaligned relative to other elements in the centered page, an insertion layer must be used.
In centered pages, two methods are commonly used to ensure that there is no misalignment of layers relative to other centered elements.
Using the insertion layer
1. In a centered page, place the insertion point in the document. In the example, place the insertion point in the table.
2. Select the "Insert"/"Layer" menu.
3.A layer is inserted into the document. In the example, a layer is inserted into the table. When tested in the IE browser and the resolution is changed, the content of the layer will not be misaligned relative to other centered elements.
Check the properties of this layer in the properties panel. This inserted layer clears the "left" and "top" values.
This method is often used to create pop-up menus.
Using Nested Layers
A nested layer is a layer whose code is contained within another layer.
Before using nested layers, you must first set some parameters for the layer. Select the "Edit"/"Preferences" menu, and in the "Preferences" dialog box, select "Netscape 4 Compatibility: Fixed size when inserting layers" so that the nested layers created can be compatible with the Netscape 4 browser. And check "Nesting: Use nesting if in layer".
Open the Layers panel and uncheck "Prevent Overlap".
Nested layer:
Insert a table in a centered page, and insert a layer in the table. This layer will not be misaligned relative to the table. In this layer, use the "Insert"/"Layer" command to insert a sub-layer (nested layer). No matter how you move this sub-layer on the page, its position will not be displaced relative to other centered elements.
In an inserted layer, you can insert multiple nested layers, and then move the nested layers to the required places, so that you can use the layers as you like on the centered page.
Conclusion: Center the page, make pop-up menus, use the Insert/Layer command; use layer layout and place content in layers, use nested layers.