A detailed description of CSS floating and positioning

a detailed description of CSS floating and positioning

What does the concept of a document flow mean? Is there a way to get elements out of the document flow?

• Document flow, refers to the element layout process, the elements will automatically from left to right, from the top down the flow of the arrangement. The final form is divided into rows from top to bottom, and the elements are emitted from left to right in each row. Leaving the document flow is an element that disrupts the arrangement or takes away from the layout.

• The ways to get elements out of the document flow are floating and positioning.

Second, there are several positioning methods, respectively, how to achieve positioning, how to use the scene?

There are four ways to locate CSS: Default positioning (static), relative positioning (relative), absolute positioning (absolute), and fixed positioning

• Static: The default value. No positioning, elements in normal flow, Top,right,bottom,left and Z-index properties are not valid. Examples are as follows:

• Relative: Generates a relatively positioned element, positioned relative to its normal position by the position of the top,bottom,left,right. Relative to the position of the element in the default stream.

Attention:

1. After setting the element position property to relative, the Top,bottom,left,right property is used to offset it relative to its original position;

2. After the element is shifted, the position that he originally occupies in the default document stream still exists, and the element positioned immediately after it is positioned according to its original position;

3. After the element is offset, there may be cases where other elements are overwritten, and you can use the Z-index property to display a hierarchical finite level.

Example:

The second box element pans down by 20px relative to the previous position (the dashed part), and the 30px to the right.

To make the third block-level element appear obscured, we can use the following code to implement:

Note: The use of z-index must ensure that the element's style contains the positioning method, previously forgot to add the positioning method to the Box3, causing Z-index to Box3 does not work.

• Absolute: Creates an absolutely positioned element that is positioned relative to the first parent element outside of the static anchor.

Attention:

1. The absolutely positioned element is out of the document flow, and the layout of the other elements in the normal stream is as if the absolute element does not exist;

2. The position of an absolutely positioned element is relative to the nearest positioned ancestor element, and its position is relative to the body if the element does not have a positioned ancestor element;

3. An absolutely positioned box can overwrite other elements of the page.

Example:

This is the case where the closest parent element to Box2 has been located, and if the parent element closest to Box2 is not positioned, the example is as follows:

• Fixed: Essentially an absolute location that does not reserve space for elements. Specifies the space of an element by specifying its position relative to the screen window, and the position of the element does not change when the screen scrolls. Fixed navigation at the top of many sites, fixed ads in the lower right corner, and more.

Example:

Three, absolute, relative, what are the reference points for the fixed offset respectively?

The reference point of the absolute offset is: relative to the nearest positioned parent element, if not, then relative to the BODY element;

The reference point of the relative offset is: relative to the original position of the element in the normal flow;

The reference point for the fixed offset is: relative to the browser window.

Iv. What is the role of Z-index? How do I use it?

The Z-index property is used to set the stacking order of nodes, and nodes with higher stacking order appear in front of nodes with lower stacking order.

How to use: Example

1.z-index is only valid for anchored elements (position:relative| | absolute| | Fixed);

2.z-index can only compare sibling elements

Five, position:relative and negative margin can make the element position offset? What's the difference?

Both the position:relative and the negative margin can offset the position of the element, and the difference is expressed in the following:

• A negative margin offsets the position of the element in the document stream, discarding the space occupied before the offset, and the element that follows it fills the space;

• When the position of the element is shifted relative to the position, it still sticks to the space it occupies, and does not allow other elements of the document flow to flow.

Example:

Six, how to let a fixed width of the element vertically horizontally on the page?

You can use absolute positioning and negative margin, for example:

What are the characteristics of floating elements? What are the effects on other floating elements, common elements, and text?

• The characteristics of floating elements are:

1. Blocks are displayed in a row;

2. Inline elements support wide height;

3. Whether it is a block element or an inline element, the default content is open width when there is no width;

4. Out of the document flow;

5. Raise the level half level.

• Effects on other floating elements: after floating elements never exceed the top of the first floating element.

• Effects on ordinary elements: floating elements are removed from the normal flow of the document, making the position of the element close to it offset, affecting the layout.

• Effect on text: When a floating element extends downward, it does not affect the display of normal text, and the text is offset relative to the floating element. However, some text backgrounds are obscured by floating elements. (Refer to the big talk float)

Floating Example:

Eight, what is the clear floating point? How do I clear floating?

Clear floating refers to: under non-IE browser (such as Firefox), when the height of the container is auto, and the contents of the container is floating (float is left or right) element, in this case, the height of the container can not be automatically stretched to fit the height of the content, So that the content overflow to the outside of the container and affect the layout of the phenomenon, in order to prevent the occurrence of this phenomenon of CSS processing, called CSS to clear the float.

To clear floating methods:

1. Using an empty element with the clear property

After floating the element, use an empty element such as <p class="clear"></p> , and give the property in the CSS to .clear{clear:both;} clean up the float. can also <br class="clear" /> be used or for cleaning.

2. Using the overflow property of CSS

Add Overflow:hidden to the container of the floating element, or overflow:auto; You can clear the float, and you also need to trigger haslayout in IE6, such as setting the container width height for the parent element or setting zoom:1.

3. Using CSS: after pseudo-elements

Additional: About the use of clear:both clear floating, has been not very clear, there is a clear floating understanding of the wrong, thinking that after the removal of floating, the elements of the rendering order and the normal flow, the actual is not the case, the following gives my own understanding, shortcomings, welcome everyone to criticize correct.

• About floating

In the following code:

Add a background picture to the parent container and the picture will be rendered according to the normal stream

If you add a float to the background image on this basis, the effect is as follows:

We can see that the parent element is highly collapsed and the background picture is out of the flow of the document, so the parent container P has a recharge height, so let's add some text to the parent container to see its height change.

The height of the parent container is open and there is wood! There's Wood there!

So the child element floats because the parent element collapses because the p height is not set beforehand, so the p height is determined by the height of the child element it contains. Instead of floating out of the document stream, the picture is not calculated as a height. In this case p, the equivalent p neutron element height is 0.

• A problem that bothered me for a long time, and share with you, on the code bar:

I do not understand the point is: why the situation two box2 width than the case of a box2 width, the situation of the two box2 can float up, and the situation one can not?

The answer is: because the width of the case is limited to 100px, so the Box2 text can not be surrounded by the right, so only down. For Case 2, because the width is 200px, the box2 can be around this width in box1

• About Clear:both's understanding:

Clear:both, in fact, is the use of clear floating to the outer p open, so sometimes, we will set the internal p to float, we will find that the outer p background is not shown, because the outer p is not open, too small, so the background can be seen only one line.

Examples are as follows:

About CSS floating, positioning knowledge first said so much, there is no shortage of places to welcome you to correct.