It is difficult to grasp this knowledge point, but the harder it is to grasp it, the better we should understand it.CodeI believe everyone can understand and digest it and turn it into something of their own. We will continue to learn more in the future, so that we can turn our understanding into practical knowledge.
Not much nonsense. Now I want to learn how to position myself.
The common positioning is that there are not many in 4 and many in 4, so understanding it is equivalent to digesting it.
1. Static location (static )([Left and top are invalid by default ])
2. Relative positioning of relative
3. Absolute location of absolute
4. Fixed fixed
Column description
A. static positioning [Static location (static) (default)]:
Default: the HTML and CSS files are provided first.
HTML file:
<! Doctype html
Public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "position.css">
<Title> positioning exercise </title>
</Head>
<Body>
<Div class = "div1"> content 1 </div>
<Div class = "div1"> content 2 </div>
<Div class = "div1"> content 3 </div>
<Div class = "div1"> content 4 </div>
</Div>
</Body>
</Html>
CSS file:
. Div1 {
Background: green;
Float: left;
Margin-left: 5px;
Height: 30px;
Width: 70px;
}
:(Source image)
B. Relative positioning of relative (requires that content 2 be separated from the standard stream, adopt relative positioning, and put content 2 under content 3) We set content 2 to an ID Selector
First look at the effect: relative positioning is inReposition the original basic location, Although it is out of the standard stream, but itsSpace cannot be occupied.If you still cannot understand it, you can modify the data on your own based on my code for testing..
HTML file:
<! Doctype html
Public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "position.css">
<Title> positioning exercise </title>
</Head>
<Body>
<Div class = "div1"> content 1 </div>
<Div id = "Spe" class = "div1"> content 2 </div>
<Div class = "div1"> content 3 </div>
<Div class = "div1"> content 4 </div>
</Div>
</Body>
</Html>
CSS file:
. Div1 {
Background: green;
Float: left;
Margin-left: 5px;
Height: 30px;
Width: 70px;
}
# SPE {
Position: relative;
Top: 35px;
Left: 75px;
}
C. Absolute (absolute positioning)
:
Absolute positioning:Locate the element closest to the standard stream. If there is no parent element, locate the element relative to the upper left corner of the body as the standard.
HTML file not changed:
CSS file:
. Div1 {
Background: green;
Float: left;
Margin-left: 5px;
Height: 30px;
Width: 70px;
}
/* Relative positioning
# SPE {
Position: relative;
Top: 35px;
Left: 150px;
}
*/
# SPE {
Position: absolute;/* absolute position */
Top: 40px;
Left: 70px;
}
Understand this sentence:Locate the element closest to the standard stream. If there is no parent element, locate the element relative to the upper left corner of the body as the standard.
Here is an experiment:
Content 2 is in a div and shows that this Div has already been positioned once. Now I want to locate content 2 in this Div (the one in the pink background, we will perform absolute (absolute positioning) on content 2. How does it move?
HTML file:
<! Doctype html
Public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "position.css">
<Title> positioning exercise </title>
</Head>
<Body>
<Div class = "div1"> content 1 </div>
<Div id = "Spe" class = "div1"> <Div class = "div2"> content 2 </div>
<Div class = "div1"> content 3 </div>
<Div class = "div1"> content 4 </div>
</Div>
</Body>
</Html>
CSS file:
. Div1 {
Background: green;
Float: left;
Margin-left: 5px;
Height: 30px;
Width: 70px;
}
/* Relative positioning
# SPE {
Position: relative;
Top: 35px;
Left: 150px;
}
*/
# SPE {
Width: 300px;
Background: pink;
Height: 100px;
Position: absolute;
Top: 80px;
Left: 70px;
}
. Div2 {
Background: green;
Float: left;
Height: 30px;
Width: 70px;
}
Now we start to move content 2: Move Up To 10px, and move 20 Px to the left, mainly in the direction of his movement.
: It moves in its parent element (the wrapped div is the standard), instead of moving it as the body standard.
CSS file:
. Div1 {
Background: green;
Float: left;
Margin-left: 5px;
Height: 30px;
Width: 70px;
}
/* Relative positioning
# SPE {
Position: relative;
Top: 35px;
Left: 150px;
}
*/
# SPE {
Width: 300px;
Background: pink;
Height: 100px;
Position: absolute;
Top: 80px;
Left: 70px;
}
. Div2 {
Background: green;
Float: left;
Height: 30px;
Width: 70px;
Position: absolute;
Top: 10px;
Left: 20px;
}
Therefore:From the perspective, the so-called absolute positioning refers,Locate the element closest to this element that is out of the standard streamIf there is no parent element (or there is a parent element, but the parent element is not out of the standard stream), it is located relative to the upper left corner of the body.
D. Fixed positioning (fixed)
The so-called fixed positioning means that, in any case, it is located in the upper left corner of the View window.
If you cannot understand it, you can take it as a small exercise and understand it slowly. There is no difficulty.
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
