This is the 6th day of my participation in the August More Text Challenge

Position

Bitwise is a more advanced layout technique that allows you to place elements anywhere on the page using the Position property

 

Optional value:

• Static Default, element is static and positioning is not enabled

• Relative enables the relative positioning of elements

• Absolute Enables the absolute positioning of elements

• Fixed Enables the fixed positioning of elements

• Sticky enables sticky localization of elements

 

Offset:

• Top Positions the distance above the element and position

– bottom The distance between the positioning element and the positioning position

– Position The vertical position of an element is controlled by the top and bottom attributes, which are usually used only

– The larger the value of top is, the lower the locating element is

– The larger the bottom value is, the higher the positioning element moves up

• Left The distance to the left of the positioning element and position

• Right Is the distance to the right of the positioning element and position

– Location The horizontal position of an element is controlled by the left and right attributes. Usually, only one attribute is used

– left The larger the element, the more rightward it is

– The larger the right, the more left the element is

 

Relative positioning

Element relative positioning is enabled when the element’s position property is set to relative

Characteristics of relative positioning:

• When relative positioning is enabled for an element, if the offset is not set, the element will not change and will not affect the position of other elements

Although d2 sets the relative positioning, it does not set the offset, so there is no change in d2 position.

• When positioning is enabled on an element, the position of the element can be set by an offset

• Relative positioning is moving the element relative to where it should have been.

 

 

Absolute positioning

When the element’s position property is set to absolute, the absolute positioning of the element is enabled

Characteristics of absolute positioning:

1. Absolute positioning does not occur if the offset element position is not set

2. When absolute positioning is enabled, elements are removed from the document flow, affecting the position of other elements

3. Absolute positioning changes the nature of the element, so that the inside of the row becomes a block, and the width and height of the block are inwards

4. Absolute positioning raises an element one level above other positioned elements

5. An absolute positioning element is positioned relative to its containing block

The block shown below is the root element

 

Containing blocks

Under normal conditions:

The containing block is the closest ancestor block element to the current element

< div > < div > < /div >

< span > < em > Hello < /em > < /span > < /div >

Absolutely positioned containing blocks:

The contain block is the closest ancestor element to which positioning is enabled, if all ancestors

Elements that have no positioning enabled include the block that is the root element (root element,

Initial contain block)

 

Fixed position

Setting the position attribute of an element to fixed enables the element’s fixed positioning. Fixed positioning is also an absolute positioning, so most of the characteristics of fixed positioning are the same as absolute positioning.

1. Absolute positioning does not occur if the offset element position is not set

2. When absolute positioning is enabled, elements are removed from the document flow, affecting the position of other elements

3. Absolute positioning changes the nature of the element, so that the inside of the row becomes a block, and the width and height of the block are inwards

4. Absolute positioning raises an element one level above other positioned elements

 

The only difference is:

5. Fixed location is always positioned with reference to the browser viewport

Think of a little AD on some website that stays there no matter how much you click on it.

 

Viscous positioning

When the elements of the position property is set to sticky when they opened the elements of the viscosity, viscosity characteristics of positioning and relative positioning, different viscous positioning can be arrived at one location should be fixed in the element, there are a lot of browser does not support, currently know about the line, later can make more perfect combination of js viscous effects.

 

layout

When absolute positioning is enabled, the original horizontal layout equation needs to add left and right values

$Marginleft + borderLeft + paddingLeft + Content + Padingright + borderRight + right = parent width$

Now the rule is the same as it was before except that two more values are added, and when there is an over constraint, if there is no auto then the right value is automatically adjusted so that the equation is satisfied, and if there is auto then the auto value is automatically adjusted so that the equation is satisfied.

You can set the value of auto

• margin

• width

–  left

–  right

 

The diagram below. According to the original horizontal layout equation, one of the ways to set the element centralization is to set the left and right margin to auto, but this does not work in absolute positioning.

Since the default values of left and right are auto, if you do not know left and right, the two values will be adjusted automatically if the equation is not satisfied. Therefore, to set the center, you need to set the values of left and right.

Alternatively, you can center the element vertically:

z-index

For elements with positioning enabled, the z-index attribute can be used to specify the level of the element. Z-index – requires an integer as a parameter. The larger the value, the higher the level of the element, the higher the level of the element, the higher the priority display

If the elements have the same hierarchy, the elements lower down are shown first

Ancestral elements do not overwhelm descendant elements at any higher level

Outer4 is on the upper layer of outer3 because the outer4 code is further down.

Outer1 has the highest number of layers. Its inner child has no height, but it’s still above outer1