Position and hierarchy of CSS units-Div tag

As we all know, using HTML to locate text and graphs on webpages is a "heartbreaking" thing. We must use table labels and implicit GIF images. Even so, positioning accuracy cannot be ensured, because different browsers and operating platforms may change the display results.
CSS allows you to see the dawn of hope. With the CSS attributes we will learn today, you can precisely set the positions of elements, and stack the elements of positioning on each other... and ...... take a look!
Cascading Style Sheets (CSS) is the basis of DHTML. CSS is used to set how elements on your webpage are displayed. Cascading Style Sheets positioning (CSS-P) is an extension of CSS that can be used to control the position of anything on a web page or in a window. Remember these two terms: CSS and CSS-P. The following four URLs provide detailed documents and explanations about CSS and CSS-P.

　● 1. Use the DIV tag (Div)

When we use a CSS-P, we primarily use it on Division tags. When you place text, images, or other content in a DIV, it can be called "Div block", "Div element", or "CSS-layer ", or simply "layer ". In Chinese, we call it a "level ". So when you see these terms later, you will know that they refer to HTML in a div.
The method for using div is the same as that for using other tags:
<Div> This is a div tag. </div>
If a div is used independently without any CSS-P, the effect on the Web page is the same as that on the use of <p> </P>.
But when we use the CSS-P In the DIV, I can strictly set its position. First we need to give this Div that can be controlled by the CSS-P an ID or say its name. For example, the name of the DIV below is truck. The purpose of giving a name is that we can use JavaScript to control it in the future, for example, moving it or changing some of its properties.
<Div id = "truck">
This is a truck
</Div>
The name of a hierarchy is random. The name can be any English letter or number, but the first name must be a letter. There are two ways to apply the CSS-P to the div.
　　Inline CSS:Inline is the most common method.
<Div id = "truck" style = "styles go here">
This is a truck.
</Div>
　　External STYLE tag:The results of using the external method are the same. We will explain this method in detail in future courses. Now we will mainly discuss the inline method. Note the relationship between the ID in the style and the DIV in the external method.
<Style type = "text/CSS">
<! -- # Truck {styles go here} -->
</Style>
<Div id = "truck"> This is a truck. </div>

　　Cross-browser CSS:
The main purpose of this course is to enable your webpage to work on both ns4 and ie4, so we will mainly discuss the general nature of both. The following properties comply with the standards given by W3C.

• Position determines how the DIV tag is placed. "Relative" means that the position of the DIV is relative to other tags, while "absolute" means that the position of the DIV tag is relative to its window.
• Left relative to the left of the window
• Position of top relative to top of window
• Width Div tag width. All text or HTML in the DIV are in it.
• Height Div tag height. This property is rarely used unless you want to clip layers.
• Clip provides the clipping (which can be viewed) section of the layer. Clip enables the DIV to be displayed as a definable square. You can use the following four values to show the position and size of the square in the div.
  Clip: rect (top, right, bottom, left );
• Visibility hides or presents a div based on its value "visible", "hidden", and "inherit ".
• The three-dimensional position of the Z-index Div tag. A greater value indicates a higher position of the div.
• Background-color Div background color.
• The DIV background color of layer-Background-color Netscape.
• The background image of the background-image Div.
• The background image of the DIV of layer-Background-image Netscape.

　● 2. absolute and relative positioning (position)

Absolute positioning:
The positioning attribute will be the key for the net worms to open the door to happiness:
H4 {position: absolute; left: 100px; top: 43px}
This CSS rule allows the browser to precisely set the starting position of <H4> to 100 pixels on the left of the browser and 43 pixels on the top of the browser. Note that the only setting here is the left and top. That is to say, the text will be loaded from left to right into the browser window from top to bottom.
The properties on the left and top are intuitive. The left is the distance between the elements on the left and the top of the browser window. When setting these distances, you can use the units or proportions of the learned degrees. When the ratio value is used, the size of the ratio value is relative to the parent element.
What can you find? Anything! Paragraphs, words, GIF and JPEG images, and QuickTime movies.
Relative positioning:
Absolute positioning allows you to precisely locate the independent location of elements on the page without considering the positioning settings of other elements on the page. Relative positioning refers to the location of the element you locate relative to the location allocated in the file. Example:
I {position: relative; left: 40px; top: 10px}
The key to relative positioning is that the location of the positioning element is usually relative to the location where it should be located. The relative positioning unit appears in the line of a common static positioning unit. When positioning, the unit is not completely separated from the static positioning unit. If you stop using relative positioning, the text display position will return to normal. Be careful when using relative positioning; otherwise, the page may be messy.
In addition to relative positioning and absolute positioning, you can also use static parameter values. Static is the default value of position. Its usage is the same as that in common HTML, and special positioning settings cannot be attached. That is to say, in addition to the margin feature or the float feature, floating units can affect the positioning of units.

　● 3. Control of positioning unit (width, height, visiblility)

In addition to controlling the position in the upper left corner of the positioning unit, you can also control the width and height of the unit and the visibility of the Unit on the page.

Width: The positioned elements are still displayed from left to right when displayed on the page. You can use the width attribute to set the limit on the movement of characters to the right, that is, to set the width of the elements.
Div {position: absolute; left: 200px; top: 40px; width: 150px}
When the browser receives this rule, it displays the text according to the rule, and limits the maximum horizontal size of the paragraph to 150 pixels.
The width attribute applies only to absolute positioning elements. You can use any length unit we have learned, or use a ratio value to set the width. the ratio value refers to the ratio to the parent element. In IE 4, this attribute can also be used for images. You can set the width to artificially pull the width or compress the image.

Height: In theory, the height should be similar to the width setting, but only in the vertical direction:
Div {position: absolute; left: 200px; top: 40px; Height: 150px}
Here I use "Theoretically speaking" because some Browsers Do not support high attributes.

Visibility: with CSS, you can hide elements to make them invisible on the page. This attribute applies to the located and unpositioned elements.
H4 {visibility: hidden}
Option:

• Visible allows elements to be seen
• Hiding Elements
• Inherit indicates that it inherits the visibility settings of the parent element.

The value inherit is the default value. This allows the unit to inherit the visibility of the parent unit. Therefore, if a segment is hidden, any inter-line Unit contained in it is also hidden. This inheritance can be replaced by explicitly specified visibility. For example, if the Em unit in a segment is specified as visible, if the segment is hidden, all other content in the segment will disappear, and only the text in the Em unit is visible.
When an element is hidden, it still occupies the original space in the browser window. Therefore, if you enclose the text in a hidden image, the display effect will be that the text is surrounded by a blank area.
This attribute is useful when writing languages and using dynamic HTML. For example, you can display a paragraph or image only when the mouse slides.

　● 4. Unit level (Z-index)

Feature Z-index is used to stack cells on the screen. By default, unit stacks appear in the order of HTML tags-that is, the Unit stacks appear in the beginning. The Z-index feature actually defines the stacking sequence of the same sibling unit and the stack of the unit relative to the parent unit. According to the draft Specification, unit groups with positive Z-index values are stacked on the parent unit, their stacking order is determined by the value (the unit with a large value is on the upper layer ). Similarly, unit groups with Negative Z-index values are stacked under the parent unit, and their stacking order is determined by the value size (units with large values are on the upper layer, for example, a unit with a value of-1 is above a unit with a value of-2 ).
This parameter uses a pure integer. Z-index is used for absolute or relative positioning. You can also set the Z-index for the image. (For communicator, it is best to package the label in the <span> or <div> label, and then apply the Z-index to <span> or <div> .)

　● 5. Absolute clip positioning unit (CLIP)

The absolute positioning unit can be edited-that is, the area where the clip is displayed to the user. only part of the unit is displayed and the rest is transparent. This is not a very useful feature for traditional text and image-based Web pages. However, it is useful to request a Multimedia Page. For example, Netscape communivator 4 and Internet Explorer 4 both support multimedia pages. They dynamically adjust the editing area around the Unit through the script interface of the document, in this way, the real-line text is displayed as "drag" and the image is gradually displayed.
In CSS, the clip is controlled by the clip feature. This feature can only be used for absolute positioning units. The default value is auto, and the clip unit is based on the outer edge of the Unit (which is actually equal to no clip ). In addition, you can use the following expression to set the editing box:
Clip: rect (top, right. Bottom, left );
Top, right, bottom, and left are the top, right, bottom, and left of the rectangular editing box relative to the upper left corner of the clip unit. The top, right, bottom, and left values can be any absolute or relative length value (but cannot be a percentage value), or the keyword auto. If the value is auto, it means that after each side of the editing area is placed, NO content in the Editing Unit will exceed this area.

　● 6. Overflow)

Fixed the width and height of the absolute or relative positioning Unit. It is likely that the specified area cannot meet the actual content needs of the unit, resulting in the overflow of the unit content. In this case, you can use overflow to specify how the browser handles overflow: the value of none (default) allows the browser to display overflow content, so the unit can overflow the specified area. The clip value requires the browser to edit the unit content at the bottom and right of the unit, so that the unit content beyond the specified area is not displayed. Scroll also requires the browser to edit the unit content (same as clip) at the bottom and right of the unit. However, the browser should (if possible) provides a scroll bar for units so that users can scroll through the edited content.