There are three types of CSS positioning properties, namely absolute positioning, relative positioning, fixed positioning.
Position:absolute; <!--absolute positioning-->position:relative; <!--relative positioning-->position:fixed; <!--fixed positioning--
described below.
Relative positioning
Relative positioning: Position adjustment of the element relative to its original position (can be used to fine-tune the position of the box).
The background attributes we previously studied were in the following format: background-position: Offset downward to the right;
But this time the positioning property is in the following format:
position:relative; left:50px; top:50px;
Examples of relative positioning:
<!doctype html>Effect:
Relative positioning not off the mark
Relative positioning: Do not take off the mark, home to leave the pit, others will not put its position squeezed away .
In other words, the relative positioning of the real location is still in the hometown, but the shadow out, can float around.
Use of relative positioning
Relative positioning has a pit, so if need to do is generally not used to do "gland" effect (put one p above another p). page, the effect is minimal. On two functions:
(1) Fine tuning elements
(2) Do the absolute positioning of the reference, the son of the father phase
positioning values for relative positioning
Left: Box Right shift
Right: Box shift left
Top: The box moves down
Bottom: Move the box up
PS: Negative numbers indicate the opposite direction.
：
position:relative; left:40px; top:10px;：
position:relative; right:100px; top:100px;：
position:relative; right:100px; bottom:100px;：
position:relative; left:200px; bottom:200px;If you want to describe the direction of the above diagram, we can first describe this:
position:relative; left:200px; top:100px;Because
left: 200pxright: -200pxit is equivalent, there are four different ways to do this picture.Absolute positioning
Absolute positioning: Defines the horizontal ordinate, where the origin is in the upper-left or lower-left corner of the parent container. The horizontal axis is indicated by left, and the ordinate is represented by top or bottom.
Examples of formats are:
Position:absolute; /* Absolute positioning */ left:10px; /* Horizontal Axis */ top/bottom:20px; /* Ordinate */Absolute positioning off-label
The absolutely positioned box is out of standard document flow.
Therefore, the nature of all the standard document streams, absolutely positioned after the non-compliance.
After absolute positioning, the label does not distinguish between the so-called inline elements, block-level elements, you do not need to
display:blockset the width, height.Absolute positioning of reference points (important)
(1) If the top is described , then the reference point is the upper- left corner of the page , not the upper-left corner of the browser:
(2) If the bottom description , then the reference point is the browser's first screen window size (Good understanding "first screen" two words), corresponding to the lower left corner of the page:
To understand the meaning of the word " first screen ", let's take a look at the dynamic diagram:
Problem:
Answer:
When using bottom, refer to the bottom left corner of the page corresponding to the browser's first screen size.
Take the box as a reference point
An absolutely positioned element, if the parent element also has an element that has been positioned (whether absolute, relative, or fixed), then the parent element will be the reference point.
As follows: (Sub-absolute father phase)
The following points need to be noted.
(1) to listen to the nearest already positioned ancestor element, not necessarily the father, may be grandpa:
<p class= "Box1" > relative positioning <p class= "Box2" > no positioning <p></p> absolute Positioning, box1 as reference, Because Box2 is not positioned, Box1 is the closest parent element </p> </p>Another example:
<p class= "Box1" > relative positioning <p class= "Box2" > relative positioning <p></p> absolute Positioning, box2 as reference Because Box2 is the closest parent element of his own </p> </p>(2) is not necessarily relative positioning, any positioning, can be used as a reference point for the son:
The son of the Father , the son of the father, the son of the father, all can be positioned for their sons. But in the project, if the son absolute, father absolutely, not a box in the standard flow inside, so the page is not stable, there is no actual combat use.
Engineering Applications:
" son absolute Father " has meaning: this can ensure that the father does not take off the mark, the son off the mark in the father's scope move. As a result, it is often done in engineering:
The father floats, sets the relative positioning (0 offset), and then lets the son absolutely locate a certain distance.
(3) Absolute positioning of the son, ignoring the reference to the box of the padding:
, the green part is the padding of Father P, and the blue part p is the content area of P. At this point, if p is positioned relative, p is absolutely positioned, then
P will ignore the father's padding, in the border inside as a reference point, to locate:
Engineering Applications:
Absolute positioning is ideal for "gland" effects. Let's give an example of a lagou.com.
Now there are two picture materials:
The following effects are required:
The code is implemented as follows:
<! DOCTYPE html>The code is interpreted as follows:
In order to display the "multi-package" that small map, we need to use the sprite map.
"Multi-Package" under the black background of the text is through the "sub-absolute father" way of the cover of the sea newspaper image above.
The effect of the code is as follows:
Center the box in absolute positioning
We know that if you want to center a box in a standard flow (horizontally), you can set it to a
margin: 0 autoproperty.If the box is absolutely positioned, it is now off the mark, if you want to center it, you can do this:
<p> width:600px; height:60px; Position:absolute; Absolute positioning of the box left:50%; First, let the left edge center top:0; Margin-left: -300px; Then, move the half of the width (600px) to the left </p>As shown in the code above, let's start with a box with a width of 600px, center the left line, and then move the half of the width (600px) to the left to achieve the effect.
We can summarize it into a formula:
left:50%; Margin-left: Half of the negative width
Fixed positioning
Fixed positioning: Is relative to the browser window to locate. No matter how the page scrolls, the box shows the same position.
Note: IE6 is not compatible.
Purpose 1: "Back to Top" in the lower right corner of the webpage
For example, we often see the page in the lower right corner of the "back to the top", you can fix the positioning.
<style type= "Text/css" > . backtop{ position:fixed; bottom:100px; right:30px; width:60px; height:60px; Background-color:gray; Text-align:center; line-height:30px; Color:white; Text-decoration:none; /* Remove the underline from the hyperlink */ } </style>Purpose 2: Top navigation bar
We can often see the navigation bar pinned to the top of the page, which can be done with fixed positioning.
Note that, assuming that the top navigation bar is 60px in height, to prevent other content from being covered by the navigation bar, we need to set the 60px padding-top for the body tag.
The top navigation bar is implemented as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">5. Z-index Properties:
Z-index property: Indicates who is pressing. The numerical value is large and the gland is small.
Has the following characteristics:
(1) The property value is located on the upper level, and the property value is small on the lower level.
(2) The Z-index value has no unit, which is a positive integer. The default Z-index value is 0.
(3) If everyone has no z-index value, or Z-index value, then in the HTML code is written in the back, who will be on top to hold others. Positioned elements that are always able to crush elements that are not positioned.
(4) A Z-index value can be found only if the element is positioned. In other words, z-index values can be used regardless of relative positioning, absolute positioning, fixed positioning. The floating element cannot be used .
(5) From the Father phenomenon: Father Counseling, son no more good also useless. This means that if the father is 1 than the Father 2, then, even if the son 1 than the son 2 small, son 1 can also be on the top.
for (1) (2) (3), examples are as follows:
This is the default example: (P2 on the upper level, p1 on the lower level)
Now add an
z-indexattribute that requires the following effect:Fifth Article analysis:
The application of the Z-index attribute is still very extensive. We can use this Z-index property to determine who is at the top when several of the positioned labels appear covered.
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
How to realize the caterpillar crawling animation
How to use CSS settings to record user passwords
Canvas animation for rotating Tai Chi
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
