Css style sheets have been written for a long time, but some css style attributes still have some problems. For example, in the past, css styles were rarely used for the position attribute. It is also relatively unfamiliar. Different browser parsing results are also a big problem. I wrote this article to familiarize myself with the usage of the position attribute and the usage of the background-position attribute.
Position indicates the Position, Position, and status. It also means placement. In CSS layout, the Position attribute plays a very important role. Many containers use the Position attribute for positioning.
The Position attribute in a CSS style sheet has the following values: static, relative, absolute, and fixed.
Static: Static location. If you have not set the position attribute, the default value is static. Top, left, bottom, right and other attributes are invalid in the case of static. To use these attributes, you must set position to one of the other three values.
Relative: Relative positioning. The element will be adjusted according to the position during the static positioning, and the space allocated to the element in the static positioning will still be allocated to it, and the elements on both sides will not fill the space with it, but they will not be squeezed out from the new position of the element.
Absolute: Absolute positioning. The element is adjusted according to the position of the element containing it. For example, if it is nested in another absolute positioning element, it is located relative to that element.
Fixed: Fixed positioning. The element will be set to a fixed position on the browser and will not scroll with other elements. The position of the fixed element on the screen remains unchanged when the scroll bar is pulled up or down. Note that IE6 does not support this attribute. Note that IE6 does not support the position: fixed attribute in CSS.
Use a small real column to describe:
Code Section:
<Style>
. Fl {float: left; width: 60px; background: #99 CCFF; border: # CCCCCC solid 1px; height: 20px; margin-left: 10px; text-align: center}
</Style>
<Body>
<Div>
<Div class = "fl" style = "position: static; top: 20px; left: 50px; "> Baidu </div> <div class =" fl "> google </div> <div class =" fl "> sina </div> <div class =" fl"> firefox </div>
</Div>
</Body>
You can also view the running result by replacing position: static with relative and absolute.
Note: many web pages are centered. In this way, when the elements are absolutely located, there will be deviations in the display at different resolutions. In this case, we can use the following methods to deal with them:
<Div style = "position: relative;">
<Div style = "position: absolute; top: 10px; left: 10px;"> </div>
</Div>
Finally, let's talk about the background-position attribute. The background-position attribute is used to determine the position of the background image. Background-position: center 25px; what does this mean? It refers to the center display of the background image, and the distance from the top is 25 pixels. You can also set other values. Then we use a small css style example to illustrate:
<Style> body {BACKGROUND: url (images/bg.png) repeat-x ;}
. Totbg {BACKGROUND-POSITION: center 25px;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-IMAGE: url (http://images.cnblogs.com/baiyjkbg.png);} </style>
<Body>
<Div class = "totbg"> </div>
</Body>
Simple Description: BACKGROUND: url (images/bg.png) repeat-xlarge is the BACKGROUND image of the entire bodypage, bg.png, and horizontal repetition. . Totbg {BACKGROUND-POSITION: center 25px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-IMAGE: url (http://images.cnblogs.com/baiyjkbg.png );} indicates the position of the background of the outermost div without repeating the loop. If you do not want the background to follow the scroll bar, you can add background-attachment: fixed; to the style sheet above ;.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
