Position properties under CSS

People who have written CSS inevitably have to deal with the position attribute, but it's not easy to really understand the position property. The first two days the blogger wanted to implement an <div> element overlay on another <div> element on an HTML page, and the effect is at the lower-right corner of the <div> element. In the online search for other people's solution, and also realized that the most important thing is to use the Position property and left, right, top, bottom and other properties. In order to more thoroughly understand the principle behind, bloggers in the online search for relevant information, finally there is some understanding, perhaps just smattering, but first write down for everyone to share.

There are blocks and rows of elements in HTML. Block elements such as Div, p, and so on, in which the child elements are arranged vertically, are displayed as a piece of content, and, in contrast, the elements of span, strong, and so on are called inline elements, and their content is displayed in the row, that is, scale-out.

All elements written in HTML are loaded into the document stream, simply saying that the flow of the document is equivalent to a container, and that all elements in the HTML are loaded into the document stream from top to bottom, left to right, and then, when the page is rendered, the elements are displayed in a Web page in the order of the document flow. So the elements in the document flow are drawn according to the relative position. However, not all elements are placed into the document flow, such as position for absolute, fixed, and so on.

So now formally speaking the position attribute. The position attribute has a total of 4 values, namely relative, absolute, fixed, and static:

Static: This is the default value for position, the static element appears in the normal document flow and is drawn according to the rules of torture;

Elements that are relative:position as relative still appear in the document flow, and elements set to relative are also expected to be fine-tuned based on the normal display position. For example "left:20px" means to indent 20 pixels to the left on the basis of the normal display position;

Elements absolute:position to absolute are removed from the document stream, and the absolute element's drawing is no longer displayed in its normal position, but rather as its first position, which is not static, is positioned, and then based on the left, Right, and so on attributes are positioned.

Fixed:position is more absolute similar to fixed elements, except that the fixed element's positioning range is no longer the parent element but the entire window. Therefore, the fixed element does not change its position relative to the browser window when the user scrolls through the Web page.

Well, the basic definition explained clearly, now combine the blogger's own practice to talk about the specific use, Bo Master want to achieve the effect as follows:

That is, there is a button in the lower right corner of a picture. Based on the knowledge described above, there should be two div elements, one of which is the parent element of the other:

<div class= "background_img" >     <div    class= "btn" ><input type= "button"/ ></div></div>

Since the class BTN <div> is positioned relative to the parent element, its position is absolute, and the position is set by bottom and right:

div.btn{position:absolute;right:10px;bottom:10px;}

For the <div> element of class background_img, the position element cannot be the default static, so it can be set to relative:

Div.background_img{position:relative;}

Just a few lines, this effect is achieved, you can try it yourself.

Position properties under CSS