Positioning (position)
Click on the image material needs or contact me private letters, comments
The positioning element's attributes
Element attributes include positioning a positioning mode and a two offset edge portions.
1, side shift
| Edge offset properties | description |
|---|---|
| top | Top offset with respect to the definition of the element of the parent element from the edge |
| bottom | Bottom offsets, defined distance relative to the element under the edge of the parent element |
| left | Left offset, with respect to the definition of the element from the left edge of its parent element |
| right | Right offset, the element is defined with respect to the right from their parent line |
Also said to be positioned offset and side with the use of such top: 100px; left: 30px; etc.
2, the positioning pattern (positioning classification)
In CSS, position attribute to define elements for positioning mode, the basic syntax is as follows:
选择器{position:属性值;}
Common position property of:
| value | description |
|---|---|
| static | Automatic positioning (default targeting) |
| relative | Relative positioning with respect to its original position for positioning the document flow |
| absolute | Absolute positioning, relative to its parent has been located on a position elements |
| fixed | Fixedly positioned relative to the browser window to locate |
Static positioning (static)
Static positioning is the default way to locate all the elements, when the value of the position property is static, the elements can be positioned in a static position. The so-called static default position is that each element in an HTML document flow position.
In the static positioning state, not to change the position of the element offset properties (top, bottom, left, or right) through the edges.
Relative positioning (relative)
Is positioned opposite the element relative to its position in the positioning standard stream, when the value of the position property is relative, the element can be positioned relative position.
After the relative positioning element is provided, the attribute may be shifted by an edge change the position of the element, but its position in the flow of the document remains.
note:
- Relative positioning the most important point is that it can be offset by moving the position of the edge, but the position occupied by the original, continue to occupy.
- Secondly, each time moving the position of the upper left corner is the base point their mobile (relative to position themselves to move)
That is, the relative positioning of the cassette is still the standard stream, it is still the standard back box streamed to treat it. (Captive relative positioning standard)
If the main purpose is to allow multiple floating block-level elements of his show, the main value is the mobile positioning position, let the box to the position we want to go.
Absolute positioning (absolute)
【注意】如果文档可滚动，绝对定位元素会随着它滚动
因为元素最终会相对于正常流的某一部分定位。
When the value of the position property is absolute, positioning pattern elements may be set to absolute positioning.
Note: Absolute positioning The most important thing is that it can be offset by moving the position of the edge, but it is completely off the mark and did not account for the location.
Parent not located
If all parent elements are not positioned to align whichever browser (document file).
Parent positioning
Absolute positioning is based on recent element has been positioned (absolute, fixed or relative positioning) of the parent element (ancestor) positioning.
Zaijuefuxiang
"Father of the child must phase" is the value of a child is absolutely positioned, then the parent to use relative positioning.
First, absolute positioning is based on recent element has been positioned absolute, fixed or relative positioning) of the parent element (ancestor) positioning.
That is, the child is absolute positioning, as long as the father is positioned to (regardless of the father is absolute positioning or relative positioning, and even fixed positioning can be), that is to say, the child must never father, the father of the child must phase it is correct.
Because the child is absolute positioning, does not occupy the position, it can be placed anywhere father inside the box.
When the parent box layout, you need to occupy the position, so the father can only be relative positioning.
This is the origin of the child must parent phase.
Absolute positioning box horizontal / vertical center
The box is about ordinary margin can be changed to auto, but for absolute positioning is invalid
The box may be positioned horizontally or vertically centered, there is an algorithm.
-
First left half the size of 50% of the parent box
-
Then go their own half of the value of negative margins can be a margin-left.
Fixed positioning fixed
Fixed positioning is absolute positioning of a special form, similar to a square is a special rectangle. It browser window to define page elements as a reference. When the value of the position property is fixed, to the positioning mode is set to a fixed positioning element.
When the elements set a fixed position, it will spin out of control standard document flow, and always to define your own display position according to the browser window. Regardless of the browser scroll bar to scroll regardless of the size of the browser window changes in how the elements are always displayed in a fixed position of the browser window.
There are two fixed positioning:
- Fixed positioning of elements that do not have any relationship with his father, identified only browser.
- Fixed positioning mark off completely, not occupy the position, without scrolling with the scroll bar.
ie6 and other low version of the browser does not support fixed positioning.
Stacking order (z-index)
When a plurality of positioning elements provided at the same time, there may occur between the positioning elements overlap.
In CSS, to adjust the positioning of the stacking order of overlapping elements, the positioning elements may be applied to the z-index multilayer hierarchy attribute, whose value may be positive or negative whole number and 0.
For example: z-index: 2;
note:
- Default attribute values z-index is 0, the larger the value, the element is positioned in the laminated element on the home.
- If the values are the same, in accordance with the writing order from behind.
- Behind the numbers must not be added to the unit.
- Only the relative positioning, absolute positioning, fixed positioning has this property, the rest of the standard flow, floating, static positioning are no such properties, also can not specify this property.
Four kinds of positioning summary
| Positioning mode | Are possession off the mark position | You can use the offset edge | Moving the reference position |
|---|---|---|---|
| Static static | Not marked off, the normal mode | Can not | Normal mode |
| Relative positioning relative | Not off the mark, occupies a position | can | Position relative to itself |
| Absolute positioning absolute | Completely off the mark, does not occupy the position | can | Positioned relative to the parent mobile location |
| Fixed positioning fixed | Completely off the mark, does not occupy the position | can | Position relative to the mobile browser |
Positioning mode conversion
Like after floating element adds absolutely positioned and fixed positioning element mode conversion will occur, it is converted to inline block mode,
** Thus, for example, if the line element is added after floating the absolute positioning or fixed positioning, mode conversion can not directly height and width to it. **
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 800px;
height: 400px;
background-color: #eee;
margin: 50px auto;
position: relative;
}
.box,
.box2,
.box-center {
width: 100px;
height: 100px;
background-color: #abcdef;
}
.box {
background-color: rgba(0,0,0,0.2);
/* 相对定位 */
/*position:relative;
*/ /* 绝对定位 */
position: absolute;
/* 偏移的属性 */
/* 垂直水平居中方法一： */
/* 让当前的定位元素水平垂直于父元素 */
left: 50%;
/* 左移自身的一半 */
margin-left: -50%;
top: 50%;
margin-top: -50%;
}
/* 垂直水平居中方法二： */
.box-center {
background-color: grey;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box2 {
width: 200px;
height: 200px;
}
/*
静态定位：position:static;默认值，存在于当前文档流中。
相对定位：①脱离了标准文档流，不占位置；
②相对位置会保留原来的位置；
③基于自身定位。
绝对定位：①脱离了标准文档流，不占位置，不会保留原来的位置；
②当父级元素没有定位时，基于浏览器定位；
③当父级有定位时，基于父级定位（--遵循子绝父相,因为相对位置会保留原来的位置，不影响后面布局）；
④有行块元素的特性，宽高生效。
固定定位：①脱标，不占位置，也不会保留原来的位置;
②基于浏览器定位；
③有行块特性
*/
span {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*设置定位的层级 */
}
.top {
/* 设置定位的层级，谁大，谁在上面 */
z-index:1;
}
.tops {
z-index: 2;
}
</style>
</head>
<body>
<div class="father">
<div class="box box-center"></div>
<div class="box2">没有定位的盒子</div>
</div>
<div class="father">
<span class="top">1</span>
<span class="tops">2</span>
</div>
</body>
</html>