Hanshunping _php from Getting started to mastering _ Video Tutorial _ 19th _ Site Recommended _ positioning _ Learning Notes _ source code diagram _ppt document collation
More books, more videos,
It's better to write a project yourself,There will be experience.
For open source projects, run up, read, and modify two times. Imitating--------> Innovation, grasping the core.
CSS Core content – positioning
Positioning-Basic concepts
The CSS positioning (positioning) property allows you to position elements. Positioning property Value:
static (default value):The element box is generated normally. Block-level elements generate a rectangular box, which is part of the document flow/standard flow, and the inline element creates one or more row boxes that are placed in their parent elements.
Relative:The element box deviates from a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains, from this point of view, as if the element is still in the same document flow/standard flow.
Absolute:The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
fixed:The element box behaves like the position is set to absolute, but its containing block is the window itself.
These positioning, really want to understand, not particularly easy things, with the help of the case to understand.
There are four common types of positioning
1.stacit Positioning (default)
2.relative relative positioning (relative to WHO)
3.absolute absolute Positioning (relative to who reference it)
4.fixed fixed positioning
(1) Static positioning is not said, the front is static positioning.
(2) positioning-relative positioning: relative
Content 2 is out of its original document stream, but its position does not want to be occupied by others. I'm gone, but the position is mine,
leave without pay.
Change the Content 2 position
Relative relative to who, relative to it should be in the position, to relocate.
Here we can see that the so-called relative positioning refers to, relative to the element should be displayed in the upper left corner reposition, although it is out of the standard flow, but its space, can not be occupied.
Relative.html
Relative relative positioningContent 1 Content 2 content 3 content 4
Relative.css
. div1{width:70px;height:30px;background:silver;float:left;margin-left:5px;} #spe {position:relative;left:40px;top:100px;}
(3) Positioning – Absolute positioning absolute
===
From the Look,
The so-called absolute positioning means thatThe element closest to the element is positioned with the upper left corner relative to the body if there is no parent element (or parent element, but the parent element is not out of the standard stream).
Absolute positioning, exactly which point to locate.
Absolute.html
Absolute positioningContent 1 Content 2 content 3 content 4
Absolute.css
*{margin:0px;padding:0px;}. div1{width:70px;height:30px;background:silver;float:left;margin-left:5px;} #spe {position:absolute;/* Absolute positioning (who is right) */left:40px,/*left is positive, move right */top:100px;/*top is positive, move Down */}
Wrap up the content 2 with a Div, focusing on "the closest element to the element that is out of the standard flow"
Absolute2.html
Absolute Positioning 2Content 1 Content 3 content 4 Test content 2
Absolute2.css
*{margin:0px;padding:0px;}. div1{width:70px;height:30px;background:silver;float:left;margin-left:5px;} #spe {position:absolute;/* absolute positioning (to whom) */left:40px,/*left is positive, the right to move */top:100px,/*top is positive, then move down */}.div2{width:200px; Height:150px;background:pink;float:left;}
(1) The content 2 is div2 wrapped up, and the original content 2 is deleted, as shown in the code as above. Because DIV2 is still a standard flow, the content 2 is still relative to the upper left corner of the body.
(2) to leave the div2 out of the standard stream, display as shown. Then content 2 is no longer positioned as body, but is positioned according to the div2 that contains it, because Div2 is the closest element to the standard stream from content 2. "The closest element to this element is the one that is out of the standard flow"
The corresponding Div2 CSS properties are modified as follows
. Div2{position:relative;left:100px;top:100px;width:200px;height:150px;background:pink;float:left;}
hands-on understanding.
(4) Positioning ――fixed positioning (absolutely right)
Change the content 2 to absolute positioning, as shown in. No matter who packs me or not, I always on the upper left corner of the window, the body of the upper left corner of the position, absolutely right.
The CSS properties of the corresponding content 2 are modified as follows
#spe {/*position:absolute;*//* absolute positioning (to whom) */position:fixed;left:40px,/*left is positive, move right */top:100px;/*top is positive, move Down */}
The so-called fixed positioning is always positioned in the upper left corner of the window, regardless.
Note:Left and top have no effect on static, ★★★static static positioning of the margin★★★
Z-index
Set the stacking order of objects
The smaller the value of the Z-index, the more below
When you set the object (div) to display, the cascading properties, the smaller the Z-index value, are displayed on the lower level.
Hanshunping _php from Getting started to mastering _ Video Tutorials _ Learning Notes _ source code illustration _ppt Document Sorting _ Directory
