Div CSSWebpage layout and proper useAbsoluteAndRelativeCan bring unexpected effects and convenience to the layout, and get twice the result with half the effort...
For more information about the relationship between the two, see the following example:
The following is a reference clip:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Div CSS example, wayhome's blog </title>
<Style type = "text/CSS">
<! --
Body, TD, Th {font-family: verdana; font-size: 9px ;}
-->
</Style> <Body>
<Div style = "position: absolute; top: 5px; Right: 20px; width: 200px; Height: 180px; Background: #00ff00;">
Position: absolute; <br/>
Top: 5px; <br/>
Right: 20px; <br/>
<Div style = "position: absolute; left: 20px; bottom: 10px; width: 100px; Height: 100px; Background: #00 FFFF;">
Position: absolute; <br/>
Left: 20px; <br/>
Bottom: 10px; <br/>
</Div>
</Div>
<Div style = "position: absolute; top: 5px; left: 5px; width: 100px; Height: 100px; Background: #00ff00;">
Position: absolute; <br/>
Top: 5px; <br/>
Left: 5px; <br/>
</Div>
<Div style = "position: relative; left: 150px; width: 300px; Height: 50px; Background: # ff9933;">
Position: relative; <br/>
Left: 150px; <br/>
<Br/>
Width: 300px; Height: 50px; <br/>
</Div>
<Div style = "text-align: center; Background: # CCC;">
<Div style = "margin: 0 auto; width: 600px; Background: # ff66cc; text-align: Left;">
<P> 1 </P>
<P> 2 </P>
<P> 3 </P>
<P> 4 </P>
<P> 5 </P>
<Div style = "padding: 20px 0 0 20px; Background: # FFFF00;">
Padding: 20px 0 0 20px;
<Div style = "position: absolute; width: 100px; Height: 100px; Background: # ff0000;"> position: <span style = "color: # FFF; "> absolute </span>; </div>
<Div style = "position: relative; left: 200px; width: 500px; Height: 300px; Background: # ff9933;">
Position: <span style = "color: Blue;"> relative </span>; <br/>
Left: 200px; <br/>
<Br/>
Width: 300px; <br/>
Height: 300px; <br/>
<Div style = "position: absolute; top: 20px; Right: 20px; width: 100px; Height: 100px; Background: #00 FFFF;">
Position: absolute; <br/>
Top: 20px; <br/>
Right: 20px; <br/> </div>
<Div style = "position: absolute; bottom: 20px; left: 20px; width: 100px; Height: 100px; Background: #00 FFFF;">
Position: absolute; <br/>
Bottom: 20px; <br/>
Left: 20px; <br/>
</Div>
</Div>
</Div>
</Div>
</Div>
</Body>
</Html>
Absolute: absolute positioning. CSS is written as "position: absolute;". Its positioning is divided into two situations:
1. top, right, bottom, and left are not set. By default, the "original vertices of content areas" in the parent level are the original vertices. The red vertices in the preceding example (the parent level yellow area has the padding attribute, the "Original Coordinate point" is different from the "original coordinate point" in the content area ).
2. If top, right, bottom, and left are set, the following two situations are involved:
(1). The parent class does not have the position attribute. the browser locates the position in the upper left corner of the browser (the "original coordinate point"). The position is determined by the top, right, bottom, and left attributes. The green section in the example above.
(2) The parent level has the position attribute, and the "original coordinate point" of the parent level is the original point. The light blue section in the example above.
Relative: relative positioning. CSS is written as "position: relative;". The original point is referred to as the "original point of content area" of the parent level. If there is no parent level, the "original point of content area" of the body is the original point, the position is determined by the top, right, bottom, and left attributes, and has the effect of "opening up or occupying the height". The orange part of the example above.
Through the examples and explanations above, I believe that it is not very difficult to use absolute and relative skillfully. We have many good examples of absolute and relative, for example, "Netease 163 free mail" Home Page (http://mail.163.com), which has a lot of use.
The example code is tested in ie5.5, IE6, ff1.5, and opera9.
Position has three values: static (static), relative (relative), and absolute (absolute). Because static is the default value of all page elements, therefore, this value is almost unnecessary when you set the positioning class type of an element, unless it is used to overwrite the previous definition.For element a with the position: relative attribute, its top, right, bottom, and left offsets take the original position of the element as the reference point, rather than as mentioned above, take the parent element or body with the relative positioning attribute as the reference point. There is a gap after an offset is set, and the elements around it are not filled with these gaps, even if they are sufficient size (for demonstration ). It is worth noting that, at this time, the margin and margin of element a will act on the original position of the element, because the original position produces an offset, the final position of the element will be the position after the combination of margin and top, right, bottom and left, and the position of the surrounding elements will also be affected.
Let's look at the absolute in relative, such as the and B elements above. If both elements have top, right, bottom, and left, for Element B, the reference point of its location offset is the position after the offset of Element A, not the original position of Element A. Similarly, if Element B has margin, its reference point is also the position after the offset of Element, this is very important. This is the concept of absolute (demonstration ).
How can we distinguish absolute from relative? How can we use it? We all know that absolute is absolute positioning, while relative is relative positioning. But what does this mean by absolute and relative positioning? What is absolute, relative to what is relative? What are their features and effects? What kind of skills are there between the two? Absolute: Position: absolute In css. It indicates absolute positioning. Refer to the top left corner of the browser and use top, right, bottom, and left (trbl) for positioning, if no trbl is set, the original point of the parent level is the origin point by default. If trbl is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by trbl. In general, if the web page is centered, absolute is prone to errors, because the web page is always automatically adapted with the size of the differentiation rate, while absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Many people make mistakes in this case. The characteristics of a webpage are similar to those of relative, but there are some essential differences. Relative: Position: relative in CSS, which indicates relative positioning. It refers to the original point of the parent level as the original point. If there is no parent level, the original point of the body is used as the original point and is located with trbl, when the parent class has CSS attributes such as padding, the original vertex of the current level is located according to the original vertex of the parent level content area. Sometimes we also need to rely on Z-index to set the upper and lower relations of the container. The larger the value, the higher the upper the corner. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with Z-index. The parent-child relationship must be set at the parent level.
When using Div + CSS for website layout, positioning issues should be taken into account for some special effects such as floating layers. This requires the position attribute. The position attribute has four values: static, fixed, absolute, and relative. The next two values are often used in the positioning of the layout. As the name suggests, absolute refers to absolute positioning, drag an object out of the Document Stream and use the left, right, top, bottom, and other attributes for absolute positioning. the stack is defined by the Z-index attribute. At this time, the object does not have margins, but still has padding and border. Ralative refers to relative positioning, which is offset position in normal Document Stream Based on left, right, top, bottom and other attributes.
But how can we use absolute and relative methods? I have never studied it carefully before, and sometimes it will be a bit confused when it comes to specific applications. I believe many friends will also have such problems. Today, I tested it and came to the following conclusions:
1. When the position attribute value is relative
The original position occupied by the object is retained, and the object following it remains the original position based on the original document stream
The top value indicates the distance from the object to the original position offset.
The bottom value indicates the distance from the object to the original position.
When both exist, only top works.
The left value indicates the distance between the object and its original position to the right.
The value of right indicates the distance from the object to the left offset from the original position.
When both exist, only left takes effect.
2. When the position attribute value is absolute
The object is extracted from the document stream, and the original position is replaced by the following object.
The top value indicates the distance between the upper border of the object and the top of the browser window.
The bottom value indicates the distance between the bottom border of the object and the bottom of the browser window.
When both exist, only top works. If neither is specified, the top is the same as the original document stream position, that is, the vertical position remains unchanged.
The left value indicates the distance between the left border of the object and the left border of the browser window.
The right value indicates the distance between the Right Border of the object and the right side of the browser window.
When both of them exist, only left takes effect. If neither of them is specified, the left side is the same as the original document stream position, that is, the horizontal position remains unchanged.
When the position attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandfather object, or a later generation, the same), the position attribute value is relative, the above-mentioned relative browser window positioning will become relative parent object positioning, which is helpful for precise positioning.
========================================================== ======================
Position: absolute. This is absolute positioning;
Is relative to the browser positioning.
For example, position: absolute; left: 20px; top: 80px; the container is always located at the position 20px left of the browser and 80 PX away from the browser.
Position: relative is relative positioning, which is relative to the previous container positioning. In this case, the top left cannot be used for positioning. Margin should be used.
For example: <Div class = "1"> </div> <Div class = "2"> </div>
When 1 is fixed. 1 style float: Left; width: 100px; Height: 800px;
The Style 2 is float: Left; position: relative; margin-left: 20px; width: 50px;
2 is located at the right of 1, PX away
Relative is not separated from the document stream, and absolute is separated from the document stream. That is to say, although relative elements seem to deviate from the original position, it actually
The file stream remains unchanged. The absolute element not only changes its position, but also disconnects from the document stream.
1. First, do not use the word "cascade" to confuse relationships easily.
2. Absolute is affected by the position of parentnode.
The position of parentnode is not relative, so the absolute object of absolute is for the body.
The position of parentnode is relative, and the absolute object of absolute is for parentnode.
That is to say, absolute definitely has a reference node.
3. for complex position relationships, we need to step down from the position settings of parentnode.
4. the node size of relative affects the size of parentnode. That is to say, relative also occupies space.
The size of the absolute node does not affect the size of the parentnode. That is to say, absolute only positions the node without occupying space.
5. Z-index is only valid for the node of absolute.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
