CSS Position attribute and sticky attribute value

New knowledge storeFront end from entry to groundFor attention, star and suggestions, update from time to time ~

This article contains: a journey of large front end foundation building from scratch (simple and profound, constantly updated ~)

The CSS Position property is used to specify how an element is positioned in a document. The top, right, bottom, and left attributes determine the final position of the element.

Such as:

.element {
  position: relative;
  top: 50px;
  left: 50px;
}
Copy the code

The values

static

This keyword specifies the normal layout behavior of the element, that is, the current layout position of the element in the general flow of the document. The top, right, bottom, left, and Z-index attributes are invalid.

relative

Under this keyword, the element is placed where it was when it was unpositioned, and then repositioned without changing the page layout (thus leaving the element blank where it was when it was unpositioned).

Position :relative invalid table-*-group, table-row, table-column, table-cell, table-caption elements.

As shown above, although the first square is moved by relative, it does not affect the original layout of the page.

absolute

Elements are removed from the normal document flow. No space is reserved for the element, and its position is determined by specifying the offset of the element relative to the nearest non-static positioned ancestor element. Absolutely positioned elements can be set to margins and won’t merge with other margins.

At this point, the parent element of the blue box is set to Position: relative, which defines the absolute position of the child element, and the child element is set to top: 80px and left: 50px

fixed

Elements are removed from the normal document flow, and no space is reserved for them. Instead, they are positioned by specifying their position relative to the screen viewport. The position of the element does not change as the screen scrolls. When printing, the element will appear in a fixed position on each page. The fixed property creates a new cascading context.

When the element ancestor’s transform, Perspective, or filter attribute is not None, the container changes its viewport to that ancestor.

sticky

The element is positioned according to the normal document flow, and then relative to its nearest scrolling ancestor and containing block. Includes table-related elements, offset based on top, right, bottom, and left values. The offset value does not affect the position of any other elements. This value always creates a new stacking context.

Note that a sticky element will “fix” on the nearest ancestor with a “scroll mechanism” (when the ancestor’s overflow is hidden, Scroll, auto, or overlay), even if the ancestor is not really a scroll ancestor.

Sticky,

Viscous positioning can be thought of as a mixture of relative and fixed positioning. The element is described as relative when it is in the display area of the screen or scrolling element, and fixed when it is rolled out of the display.

To get a feel for the interaction, scroll through the box below

Where, marker A is set to:

  {
    position: sticky;
    top: 10px;
  }
Copy the code

As the page rolls along, when A is marked 10px away from the upper edge, it will be stuck to the upper edge, just like position: Fixed.

There is a fundamental difference between sticky and fixed positioning. The fixed element goes directly to the root element of the page, while other parent elements cannot limit their left/top positioning. The sticky element is completely restricted to its parent element.

Hierarchical rolling suction top

Again, I added red or blue borders to each title group. These borders are the boundaries of the parent elements A, C, E, and T. It is obvious that the sticky-positioned element does not stay at the top when it moves to the bottom of the parent element, but moves out of the display area with the parent element.

Some features can therefore be derived:

1. Parent element Settings and sticky positioning elements of equal height fixedheightHeight values, or height calculated values, do not stick as well as the height of the sticky positioning element.
2. If the sticky elements in the same parent container have the same location value, they will overlap.
3. If the parent elements belong to different elements, and the parent elements are closely related, the magpie nest will be occupied, crowding out the original elements, forming the effect of sequential occupying.

Each label group belongs to a different parent element, so when scrolling, the title behind can push away the title already sticky in front, forming the effect of hierarchical scrolling and top suction. This is a natural feature of Sticky positioning without any help from JavaScript.

If all headline headers are under the same parent element, it will cause all sticky positioned news headlines to overlap.

For flowers who still don’t understand the rules of sticky positioning, see Reference 1.

Attached with browser support:

If you learn something new, or get a nice picture on the left, please give it a thumbs up

Reference Documents:

1. Deeply understand the calculation rules of sticky position
2. position | MDN
3. Let’s get back to position:sticky