Absolute and float

Position: absolute and float: left are close relatives

Package

The encapsulation is to make the element inline-block. For example, the default width of a div label is 100%, but once it is entangled in the absolute attribute, the default 100% width will change to the width of the adaptive internal element.

Float is also a typical inline-block element. The inline-block element applies to any horizontal label. For example, if we want the span label to support the width attribute, we may need to set it:

span { display:block; width:100px; }

However, when float: Left/position: absolute is supported, the display attribute is redundant. You can go home and have tea.

span { float:left; width:100px; }span { position:absolute; width:100px; }

Destructive

On the power of destruction, absolute positioning is obviously better than floating, But what people criticize is more is the destructive nature of floating. It is not hard to understand that flies fly around the ears all day are more annoying than the uncommon blood-sucking cool. People have already regarded floating as a part of mortals. For absolute positioning, people know that, after all, it is good for people to belong to heaven and can help build houses in other places. There is no need to demand criticism.

The destructive force of floating is to cut off the line box chain and cause the height to collapse. However, because the floating element is still in the room (DOM tree), the entity can be seen and touched, therefore, the entity it occupies is still located. The absolute positioning of absolute not only makes the height collapse, but also because it never goes deep into the world, there is no physical position in the world, so the width is also collapsed.

Because the float is in the mortal world, the damage caused by it can be compensated by other means. However, if it is definitely not in the mortal world, its damage cannot be repaired because it is lonely and no one helps; second, there is only air. How can we fix it.

For example, the following test:

. Div {padding: 20px; margin: 10px 0 0 10px; Background-color: # f0f3f9; float: Left ;}. ABS {position: absolute ;} <Div class = "Div">  <p> picture without absolute </P> </div> <Div class = "Div">  <p> after absolute </P> </div>

The result is as follows:

As you can see, after the position: absolute attribute of the image, the height and width of the parent label collapsed, and its brother float could not be saved.

 

The absolute attribute is just a common attribute, and is close to float: left. One is the demon that falls into the mortal world, and the other is the demon in the sky.

Therefore, when we use absolute in a general layout, we only need to set position: absolute. As for left/top and other items, they are all floating clouds, and positioning and other items are treated as common elements, the use of margin for positioning is equally helpful.

 

The position: absolute element of an application is actually a very common element. I feel that the difference between it and the application float: Left is only the lack of width.

(Float is only the height, but the height is still there. The width and height of absolute are missing)

Absolute implements element hiding:

 

.hidden{    position:absolute;    top:-9999em;}

　

.hidden{    position:absolute;    visibility:hidden;}

 

 

.hidden{    position:absolute;    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */    clip: rect(1px, 1px, 1px, 1px);}

There are three key points for controlling the explicit hiding of DOM elements using the absolute attribute:Page availability,Backflow and rendering,With JavaScript Control.

① Availability hiding
The so-called availability hiding means to hide Internet reading aids such as screen readers. Yahoo! Ted Drake, a member of the Usability Lab, tests the availability of screen readers with different hidden methods. The results show that screen readers cannot read the following two hidden methods.

.completelyhidden {    display:none;}

　　

.visibilityhidden {    visibility:hidden;}　

If you want the hidden content to be recognized by the secondary reading device, you cannot use it.display:noneAndvisibility:hiddenHide elements. You can use a simulated hiding method, also known as availability hiding. Is the following two hidden methods.

.hidden{    position:absolute;    top:-9999em;}

　　

.hidden{    position:absolute;    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */    clip: rect(1px, 1px, 1px, 1px);}

However, you can usedisplay:noneOrvisibility:hidden.

 

Additional instructions:If the hidden element contains a link element or a control element that can obtain the focus, it is used to hide the availability. These hidden links and controls can also respond to the keyboard focus tab switch, but this will make the keyboard user confused and confused.

Therefore, in some sense, in some cases, screen reader users and keyboard users cannot have both of them.

 

 

From:

Http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5% AE %9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%BA%8C%EF%BC%89/

Absolute and float