positioning, floating

Position

---

1. position

1. Attribute description: Set or get the positioning method of the element

2. Version change: Yes

3. Grammar template:

position : static | relative | absolute | fixed

4. Default value: static Try to avoid affecting other elements.

5. Attribute value description:

static: 静态位置，即正常文档流（常规流），此时四个方向的定位属性无用;

relative: 相对位置，同样保持常规流，相对于自身常规流的位置定位。

absolute: 绝对定位，脱离常规流，相对于最近的非静态祖辈元素定位，如果外部都为静态元素，则参照与窗口中的可视页面定位（全部的页面）。

fiexd: 固定定位，脱离常规流，相对于客户端（浏览器）的窗口进行定位（初始化页面）;当可视化页面发生变化时，元素也会移动。

6. Applicable elements: all elements whose displayattribute value is not table-column-grouportable-column

7. Is it inheritable: No

8. Is it animated: No

9. Script interface: position

Note: When positionthe attribute is non-static and all four positioning attributes are not set (that is, the default value is auto), then the element will appear as much as possible as a regular flow.

---

2. Relative relative positioning

1. Does relative positioning break away from standard layers? Answer: No

   -Analysis: The ontology is made transparent, but still exists in the standard layer. The elements we see and move are the projection of the element, which is projected on the non-standard layer.

2. Move: What moves is the projection, which is positioned with reference to the body. When moving in different directions with reference to the body, the xypositive and negative directions of the axis will change.

3. Width and height attributes: Although the projection is a floating element, its body is still in the standard layer, so the width and height attributes are not 0.

4. Because the entity is not deflowed, non-floated elements will not overlap the entity, and block elements will be on their own line.

5. Inline element: After relative positioning, its display will not be changed. It still inlinedoes not support width and height attributes.

6. By moving in different directions (up, down, left, right), xythe positive or negative axis will change.

---

3. fixed fixed positioning

1. Floating: no projection, directly off-label.
2. mobile body
3. Positioning: Position with reference to the boundary of the visualization window (not the body). When the scroll bar is moved, the element will not move.
   • Visual interface: the part displayed on the web page
4. Inline elements: supports width and height attributes of inline elements

---

4. absolute positioning

1. Floating: the body is separated from the standard layer

2. mobile body

3. Positioning: the reference is variable

   -The reference is not the window, but the part of the page presented by the browser (the border of the initial visual page). When the page changes, the elements will also move.

   -If there is a non-static element, refer to its border; if there is no non-static element, refer to the border of the visible page

4. Inline elements: supports width and height attributes of inline elements

---

5. top

1. Property description: Set or get the offset of the element from the top boundary of the reference object

2. Version change: No

3. Grammar template:

top: auto | <length> | <percentage>

4. Default value: auto , automatic judgment

5. Attribute value description:

auto: 自动，根据尽量保持常规流状态的规则自动分配;

<length>: 长度值，可以为负;

<percentage>: 百分比，相对定位参照父级元素的宽度，绝对定位参照非静态的祖辈元素的宽度，固定定位参照窗口的宽度，可以为负;

6. Applicable elements: position non-static elements

7. Whether it is inheritable: None

8. Whether it is animated: when the value is <auto>or<percentage>

9. Script interface: top

Note: This attribute is used to specify that the box is offset downward relative to the top boundary of the object. The relative object of a relatively positioned element is itself, while the paddingoffset value of absolutely positioned and centered positioned elements is calculated from the boundary of the containing block.

---

6. z-index

Property description: Set or get the stacking order of elements

Version change: No

Grammar template:

z-index: auto | <integer>

default value: auto

Property value description:

auto: 层叠级别为0，该种情况下元素不会创建新的局部层叠上下文;

<integer>: 使用整数来表示层叠级别，值越大层级越高，可以为负值;

Applicable elements:

Is it inheritable: No

Is it animated: Yes

Script interface: zIndex

**Phenomena:** When the z-index values ​​​​of two elements are the same, they are arranged according to the order of the elements, with the later coming first; but if the level of the non-floating element is higher than that of the floating element, it will not have an impact, that is, the floating element is in upper layer.

Note: If there are elements of the same level in the same stacking context, then the later ones will overwrite the previous ones according to the order of the document flow.

---

7. Four arithmetic operations of calc

**Value description:**This value is generally used to center the container

margin: calc(50% -<lenght>);

lenght：容器宽的一半

---

---

Layout

---

float

**Attribute description:** An element breaks away from the standard layer and tries its best to move to the left.

**Standard layer:** Also known as the standard document flow, it is at the bottom of the browser. Each floating element also has its own standard layer.

• Departing from the standard layer is referred to as off-labeling and off-flow.

Version change: No

Grammar template:

float：none | left | right

default value: none

Property value description:

none：设置对象不浮动;

left：设置对象浮在左边;

right：设置对象浮在右边;

**Applicable elements:**All elements

Is it inheritable: No

Is it animated: No

Rules and Features:

• Rule 1: When an element is floating, it cannot affect elements that have been laid out.
• Rule 2: No matter what element is floated, it will become a floating block (block element)
• Rule 3: In standard layers, block elements must occupy one row. However, because floating elements are off-label, multiple floating elements will be displayed in the same row. When one row cannot fit, they will automatically wrap.
• Rule 4: No matter what element is separated from the standard layer, the default width and height in the standard layer are 0*0, and it is automatically converted into a block.
  • In non-standard layers, there is no concept of rows, let alone text, so there are no inlineattributes in non-standard layers.
• Rule 5: The floating element will not collapse or penetrate the margin of any element because it is not in the same parallel space.
• Rule 6: No space between two float elements (space between two block elements)

Phenomenon:

1. As long as the element is absolutely positioned or fixedly positioned, it can no longer be floated.

   Reason: Relative positioning and absolute positioning have been disconnected.

2. Relative positioning and floating can coexist

   Reason: The ontology is retained in the regular flow, and the ontology can float; the element is positioned first, and then the ontology is detached.

3. Floating elements will not collapse the margin of the element, but when it is a negative value, it will collapse with the floating element.

4. div1、div2、div3It is a brother relationship. If div1it div3floats or div2does not float, div3it will move to div1the lower right corner of

   Reason: If there is not enough horizontal space for the floating element to occupy, the floating element will move downward until there is enough space below or there are no floating elements below.

   5. When three pictures are distributed horizontally, width=33.333% will produce white edges, which can be solved by floating directly. This kind of picture is called an adaptive picture.

**Usage scenario:** This float is usually used as a navigation bar

Scripting interface: styleFloat(IE) orcssFloat非(IE)

Note: float It does not take effect in absolute positioning and last timedisplaynone

---

---

clear

Property description: Clear the effect of floating on an element ** instead of clearing the float attribute

Version change: No

Grammar template:

clear：none | left | right | both

default value: none

Property value description:

none：允许两边都可以有浮动对象;

both：不允许所有浮动对象;

left：不允许左边有浮动对象;

right：不允许右边有浮动对象;

Applicable elements: block-level elements

Is it inheritable: No

Is it animated: No

Script interface: clear

---

Parent height collapse

• Definition: The child elements inside the parent element are all floating elements, but because the floating elements are off-standard, the height of the parent element is 0, rule 4.

• Solution: Add a clearfix(clear float, repair) div at the bottom of the floating element

• clearfixStandard name

  .clearfix{    clear: both;        }
  <div class="clearfix"></div>
  

---

---