Position and Float attributes in CSS-

For Position and Float, we usually use two CSS attributes that are frequently used. The usage of these two attributes may be vague and unclear for most people. This article mainly introduces the usage of these two attributes and some of the ** cross usage of these two attributes ....,. For Position and Float, we usually use two CSS attributes that are frequently used. The usage of these two attributes may be vague and unclear for most people. This article mainly introduces the use of these two attributes and discusses the cross-use of these two attributes.

　　This article focuses on:

1. Basic usage of Position and Float attributes

2. Influence of Position and Float attributes on Elements

3. Position and Float attributes ** impact of the preceding cross usage

4. Tips on Position and Float attribute usage

　　Structure of this article:

1. Highlights of HTML layout

Box Model

Common HTML stream

2. Position attribute

Attribute Value Introduction

Usage

A little bit about position

3. Float attributes

Attribute Value Introduction

Usage

Compatibility with Position

Basic HTML layout points:

To master and use the Position and Float attributes, you must have a clear understanding of the two basic points of HTML.

1. box model)

2. normal flow of HTML)

　Box Model

The box model of elements in HTML is divided into two types: Block elements and intra-row elements. Note the Block elements and Inline elements) it is not the same as the inline and block attribute values in the Display attribute. Inline and Block in the box model are similar to the parent class of the Display attribute. For example, the value of list-item in the Display attribute belongs to the Block type.

We can intuitively see the differences between the two box models.

• You can set the width and height attributes for Block elements, but the Inline type setting is invalid.

• Block-type elements occupy only one row (intuitively, line breaks are displayed and cannot be displayed in the same line as other elements, unless you manually modify the style of the element ), inline elements are displayed in a row.

• The width of Block elements is 100% by default, while the Inline elements determine the width based on their own content and sub-elements.

　　

List the categories of common elements

• Block elements: P, DIV, UL, LI, DD, DT...

• Line Elements: A, IMG, SPAN, STRONG...

　　

　　Common HTML stream

When the browser reads the HTML source code, it reads the elements in the order in which the code appears. The final element is displayed based on the element's box model. The element in the row is left to right, and the block element is from top to bottom. (For example)

strongemspan
A
B
C

Let's use block elements as an example:

A
B
C

Let's take a look at the line elements (Here we use the most commonly used span as an example)

strongemspan

Please note that here I have assigned a value (100px) to the width attribute of span ). However, we can see that after span uses the position attribute value of relative, it still does not work for the width attribute. In other words,Position: relative does not change the Display attribute of the element in the row. This concept is very important (note the difference with the next absolute ).

Absolute

Absolute positioning, commonly known as absolute positioning, is relative. How can this problem be understood? The position: absolute element is applied to determine the "root" based on the parent element in the node tree, and then offset the element relative to the "root. If the position attribute value of all parent elements in the node tree is not set to relative or absolute, the element will eventually offset the position of the body. The position: absolute element is applied.Leave the normal stream on the page and change the Display attribute (Focus )!

Let's use a default nested DIV as an example.

    
        A        
            A - 1            
                A - 2            
        
    

Now we set absolute positioning (Top: 0, Left: 0) for the p of the A-2, without setting any position value for its parent element (A, A-1)

    
A            
A - 1                
                A - 2

From the above figure, we can summarize the following conclusions.

1) the width of a block element is 100% in the case of position (relative/static), but after the position: absolute is set, the width is changed to auto (will be affected by the width of the parent element ).

2) After the position: absolute element is set, if the top, bottom, left, and right attributes are not set, the browser defaults to auto, the value of auto is the "default position" of the element ". That is, the value of offsetTop and offsetLeft before and after position: absolute remains unchanged.

Special cases:

• Firefox will directly set top and left to offsetTop and offsetLeft values instead of auto.

• IE7 is similar to float and will be appended to the end of the parent element.

1) The position: relative/absolute element is applied, and the margin attribute is still valid. Use position: relative as an example. If the left, top, bottom, and right attributes are set, we recommend that you do not set the margin data, because it is difficult to accurately locate elements and minimize interference factors.

2) position: absolute ignores the padding of the root element.

A    
A - 1        
A - 2        
    

3) setting the position attribute in IE6/7 will invalidate the z-index attribute.

 
A
B

4) after applying position: absolute, the line element changes the display.

My display attribute is changed from inline to block

5) After position: absolute/relative is applied, it will overwrite other non-positioning elements (that is, elements whose position is static). If you do not want to overwrite other elements, you can also set z-index to-1.

1) after the position: relative, float, and (top/left/bottom/right) attributes are applied to the element, the element first floats to the corresponding position, then, the offset is calculated based on the distance (top/left/bottom/right.

p

2) If both the position: absolute and float attributes are applied to the element, the float is invalid.

I am a DIV that applies position: absolute and float: left, but I am still on the right side of the browser, not floating to the left.

3) When position is applied to the first element, the next float element will be overwritten (if the two elements are in the same position)

I am a DIV that applies position: absolute.
I am a float: left DIV

Review: if you do not set the position of a float element to relative, it is invalid to overwrite position: absolute by setting the z-index of the float element. Similarly, the float element has a position: absolute sub-element. If you do not set the position of the float element to relative, the absolute element will not be located to the float element.

4) Applying position: absolute and float: left at the same time will cause the floating clearing to be invalid (position:
Relative can clear floating ).

There are two common methods to clear floating:

1. Add a label to the container and set the label style to clear: both.

2. Container settings overflow: hidden

    
I am DIV
    

The above is the content of the Position and Float attributes in CSS. For more information, see the PHP Chinese website (www.php1.cn )!