Relative positioning of conventional flow (Relative positioning)

Relative positioning is really much simpler relative to the absolute positioning that will be talked about later. But simplicity doesn't mean it's not important, just say it today.

First, what is relative positioning

Once a box is positioned according to a regular flow or a float, it can be offset relative to that position. This is called relative positioning. This is the interpretation of the relative positioning in the standard.

Some properties of relative positioning elements

　　relative and absolute are a bit alike and can be offset by the top, right, bottom, and left properties, but this offset is different. The offset of the absolute element is relative to its containing block, andthecontaining block of the absolute is already mentioned in the chapter that contains the block, which is no longer said. The offset of the relative element is offset relative to its position in the regular stream.

One thing to note here is that the offset of the relative element is offset relative to its position in the regular stream, but it still occupies its original position in the regular stream, preserving its size in the regular stream . So its offset is not affected by the subsequent box . such as a relative B1 box, followed by a regular flow in the B2 box, B1 offset, B2 will not be relocated, B1 the offset of B2 has no effect.

　　If the relative positioning causes an overflow of the overflow:auto or Overflow:scroll box, the browser must allow the user access to the content, that is, the need to create the required scroll bar, which may affect the layout.

third, offsetthe value

　　For a relatively positioned element, ' left ' and ' right ' will have a horizontal displacement box without changing its size. ' Left ' will move the box to the right, and ' you ' will move the box to the other. Since ' left ' or ' right ' does not cause the box to be split or stretched, the computed value is always: left =-right. Some of the rules are as follows.

1. If the values of left and right are ' auto ' (their initial values), the computed value is 0.

<style= "position:relative; left:auto; right:auto; width:200px; height:200px; border : 2px solid #000; " ></ Div >

　　　　

2. If left is ' auto ', the calculated value is the negative of right. If right is specified as ' auto ', its computed value is a negative value of the left.

<div style= "position:relative; left:100px; Right:auto; width:200px; height:200px; border:2px solid #000; " ></div>

　　　

3. If both left and right are not auto, then one of them has to be discarded. If the direction property of the containing block is ' ltr ', then left will win and the right value becomes "-left". If the direction property of the containing block is ' RTL ', then right wins, and the left value is ignored. Note that the include block.

    <Divstyle= "width:100px; height:100px; overflow:auto; border:1px solid blue; direction:ltr; ">Ltr<Divstyle= "width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></Div>    </Div>    <Divstyle= "width:100px; height:100px; overflow:auto; border:1px solid blue; direction:rtl; ">RTL<Divstyle= "width:20px; height:20px; background-color:red; position:relative; left:60px; right:30px;"></Div>    </Div>

　　

4.the top and bottom properties move the relative anchor element up or down without changing its size. Top the box moves down, and the bottom moves it up. Because top and bottom do not cause the box to be split or stretched, the calculated value is always top=-bottom, and if two are auto, the calculated value is 0, and if one of them is auto, it is another negative value. If neither auto,bottom is ignored (the computed value of bottom will be a negative value of the top). And left, bottom a bit like, not an example.

Iv. The relationship between relative and hierarchy

The relative property is set by setting its Z-index property to elevate its level. Assuming a margin negative exists, the back box overlaps with the front box , and if the two box Z-index values are the same (or none), who is behind who is shown above. Of course, IE6 under the z-index of the problem is also exist, we should all be more familiar with, also do not speak more.

In fact, this chapter is very hasty, just accounted for a bit, it was good to write, the result of a wedding came back suddenly the whole person feel bad, maybe the wine table on the abalone was I rob too much (laughter). Headache can not, first put, back to improve it.

Relative positioning of conventional flow (Relative positioning)