Css element positioning position style learning Notes

Once I wrote a web page, it was not difficult to learn css as a whole, but it was just element positioning, and I had always had a thorough understanding. Today, based on the concept of practice, after careful testing, I have concluded the following conclusions.

Css positioning: position
Static: static positioning by default. Elements cannot be moved in normal document streams.
Absolute: an independent element that is separated from the document stream. It moves and locates relative to the parent layer (excluding the parent layer for static positioning.
Relative: relative positioning, moving positioning relative to its own location, the effect is equivalent to moving positioning relative to the parent layer.
Fixed: fixed positioning, move positioning relative to window positioning.

Note:
1. Moving positioning refers to moving the element position through the top, bottom, left, right attributes.

2. Any element has the characteristics of positioning relative to the parent layer. Therefore, when you do not need to move the positioning attribute in the direction, but only use margin to locate the element, it must be a relative shift.

3. absolute means "independent, absolute". I think it should be a "independent" meaning for better understanding. The effect it achieves is that elements are separated from the document stream, which confirms the meaning of independent existence.

The test results are as follows (static elements are not tested ):

Child element (relative to =>) parent element
Absolute => static absolute
Fixed => static absolute
Relative => static relative

Absolute => relative to absolute
Fixed => absolute
Relative => relative to absolute

Absolute => relative to relative
Fixed => relative absolute
Relative => relative

Absolute => fixed relative
Fixed => fixed absolute
Relative => fixed relative
Briefly describe the positioning of CSS style sheet elements

1. position: static | no location

Position: static is the default value for positioning all elements. It is generally not required unless there is a need to cancel the inheritance of other positioning

Example:

The code is as follows:	Copy code
# Div-1 { Position: static; }

2. position: relative | relative positioning

When position: relative is used, top, bottom, left, and rightattributes are required to determine the position of the element.

If you want the div-1 layer to move 20 px down, move 40px left:

Example:

The code is as follows:	Copy code
# Div-1 { Position: relative; Top: 20px; Left: 40px; }

If relative positioning is used, the layer divafter that follows will not appear below the div-1, but will appear at the same height as the div-1.

It can be seen that position: relative; is not very useful.

3. position: absolute | absolute positioning

You can use position: absolute; to accurately move elements to the desired position,

Let me move the div-1a to the upper right corner of the page:

Example:

The code is as follows:	Copy code
# Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; }

Using the absolute positioning of the div-1a layer before or after the layer will think that this layer does not exist, does not affect them. So position: absolute; it is useful to place an element in a fixed position, but if you need to determine the position of the div-1a layer relative to the nearby layer, don't implement it.

* Here is a bug in Win IE. If you define a relative width for an absolutely positioned element, the width of IE depends on the width of the parent element rather than the width of the entire page.

4. position: relative + position: absolute | absolute position + relative position

If the parent element (div-1) is defined as position: relative; the child element (div-1a) is defined as position: absolute, then the position of the child element (div-1a) is relative to the parent element (div-1 ), instead of the entire page.

Place the div-1a in the upper right corner of the div-1:

Example:

The code is as follows:	Copy code
<Div id = "div-1"> <Div id = "div-1a"> This is div-1a element. </Div> This is div-1 element. </Div> # Div-1 { Position: relative; } # Div-1a { Position: absolute; Top: 0; Right: 0; Width: 200px; }

5. two column layout | two-column layout

Let's practice the theory of position: relative + position: absolute to implement two-column layout.

Example:

The code is as follows:

Copy code

<Div id = "div-1"> <Div id = "div-1a"> this is the column-one </div> <Div id = "div-1b"> this is the column-two </div> </Div> # Div-1 { Position: relative;/* relative positioning of the parent element */ } # Div-1a { Position: absolute;/* absolute positioning of sub-elements */ Top: 0; Right: 0; Width: 200px; } # Div-1b { Position: absolute;/* absolute positioning of sub-elements */ Top: 0; Left: 0; Width: 200px; }

Note: In this example, we will find that the parent element's notice does not change with the child element's notice. Therefore, if the background and border of the parent element need to be defined with a high enough height, it will be displayed.

6. float | floating alignment

Use float to locate an element with float: left; & float: right; values. This type of positioning can only be located in the horizontal coordinate, not in the vertical coordinate. And let the following elements float around its left or right side.

Example:

The code is as follows:	Copy code
# Div-1a { Float: left; Width: 200px; }

7. make two clumn with float | floating implement two-column layout

If one element float: left; the other float: right; controls their width, the layout of the two columns can be achieved.

Example:

The code is as follows:	Copy code
# Div-1a { Float: left; Width: 150px; } # Div-1b { Float: left; Width: 150px; }

8. clear float | clear floating

If you do not want the elements floating around the float element, you can use clear and clear with three values: clear: left; (clear left floating), clear: right; (clear right floating), clear: both; (clear all floating ).

Example:

The code is as follows:	Copy code
<Div id = "div-1a"> this is div-1a </div> <Div id = "div-1b"> this is div-1b </div> <Div id = "div-1c"> this is div-1c </div> # Div-1a { Float: left; Width: Pixel px; } # Div-1b { Float: left; Width: Pixel px; } # Div-1c { Clear: both; }

At this point, the position of this css is over, and you can learn more from it.

It is used to set the "internal and external" position of relative and absolute positioning elements. The smaller the value, the lower the value is in the inner layer.

Example

 

The code is as follows:

Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 0 Transitional // EN" Http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.111cn.net/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 positioning conditions of use

Position: absolute; position: relative absolute positioning: usually the parent class defines position: relative positioning, and the child class defines position: absolute positioning attribute, in addition, left, right, top, or bottom are used as the sub-level for absolute positioning.
. Divcss5 {position: relative} is defined. It is usually better to define the CSS width and CSS height.
. Divcss5-a {position: absolute; left: 10px; top: 10px} defined here the distance from the left side of the parent level is 10px, and the distance from the parent level is 10px
Or
. Divcss5-a {position: absolute; right: 10px; bottom: 10px} defined here the distance from the parent level to the right is 10px, and the distance from the parent level to the bottom is 10px
Corresponding HTML structure

The code is as follows:	Copy code
<Div class = "divcss5"> <Div class = "divcss5-a"> </div> </Div>

In this way, the "divcss5-a" is definitely located in the parent "divcss5" box.
Note that left (left) and right (right) can only select one definition for an object, bottom (bottom) and top (top) you can select only one definition for an object.