Front-end advanced high salary must see -CSS

Mind Map link (HD without code)

In the figure, 1, 2, 3, and 4 indicate priorities

CSS selectors and their priorities

The selector	format	Priority weight
! important	10000
Inline style	1000
The id selector	#id	100
Class selectors	#classname	10
Property selector	A [ref = “eee”]	10
Pseudo class selector	li:last-child	10
Label selector	div	1
Pseudo element selector	li::after	1
Adjacent sibling selectors	h1+p	0
Child selectors	ul>li	0
Descendant selector	li a	0
Wildcard selector	*	0

Matters needing attention:

• ! The style declared by important has the highest priority;
• If the priority is the same, the last style to appear takes effect;
• Inherited styles have the lowest priority;
• The universal selector (*), child selector (>), and neighboring sibling selector (+) are not among the four levels and all have weights of 0;
• Depending on the source of the style sheet, the order of priority is inline style > Internal Style > External Style > Browser User Defined Style > Browser Default style.

What are the inheritable and uninheritable properties of the CSS

Inheritable:

Font series font-family font-weight font size

Color text-align line-height

Visible series such as visibility

Because there are so many attributes, only common inheritable attributes are listed here

The property value of display and its function

Attribute values	role
none	The element is not displayed and is removed from the document flow.
block	Block types. The default width is the width of the parent element. The width and height can be set.
inline	Inline element type. The default width is the content width. The width and height cannot be set.
inline-block	The default width is the content width, you can set the width and height, display in line.
list-item	Display as block type elements and add style list tags.
table	This element is displayed as a block-level table.
inherit	Specifies that the value of the display attribute should be inherited from the parent element.

Display block, inline, and inline-block

Block: holds a single line and can set width, height, margin, and padding;

Inline: The element does not monopolize a line. Setting width and height attributes is invalid. You can set the horizontal margin and padding properties, but not the vertical padding and margin properties.

Inline-block: An object is set to inline, but the contents of the object are rendered as a block object, and subsequent inline objects are arranged in the same line.

What are the methods of hiding elements

Display: None: The rendering tree will not render the object visibility: hidden: The element will still occupy space in the page, but will not respond to bound listening events. Opacity: 0: elements still occupy space on the page and can respond to listening events for element bindings. Position: Absolute: Hides elements by removing them from the visible area using absolute positioning. Z-index: negative value: Hides the element by hiding it from other elements. Clip/Clip-path: The element still occupies position in the page, but does not respond to bound listening events. Transform: Scale (0,0): Scales the element to 0. The element still occupies position on the page, but does not respond to bound listening events.

The difference between link and @import

Both are external references to CSS, and the differences are as follows:

Link is an XHTML tag that, in addition to loading CSS, can define other transactions such as RSS; @import can only load CSS. When link references CSS, it is loaded at the same time as the page loads. @import requires the page to be loaded after the page is fully loaded. Link is an XHTML tag with no compatibility issues. @import was introduced in CSS2.1 and is not supported by older browsers. Link supports using Javascript to control the DOM to change styles; @import not supported.

Transition and animation

Transition is an overattribute that is implemented by triggering an event (mouse move, focus, click, etc.) in order to perform an animation. It is similar to flash’s tween animation, with a start keyframe and an end keyframe.

Animation is an animation property. Its implementation does not need to trigger events. After setting a time, it can execute itself and loop an animation. It is also similar to Flash’s tween animation, but it can set multiple keyframes (defined with @keyFrame) to complete the animation.

Display: None and visibility:hidden

Both of these attributes make the element hidden and invisible. The differences are as follows:

1. In the render tree

• display:noneNot rendering elements
• sibility:hiddenRender elements, just not visible

2. Whether the attribute is inherited

• display:noneNon-inherited attributes, descendant nodes will disappear from the rendering tree with the parent node, and cannot be displayed by modifying the attributes of descendant nodes.
• visibility:hiddenIs an inherited attribute. The descendant node disappears because it inherits the hidden. By setting visibility:visible, the descendant node can be displayed.

3. Rearrangement and redrawing

• display:noneModifying this property causes the entire document to be rearranged
• visibility:hiddenModifying this property will only cause the current element to be redrawn

What are the differences and functions between pseudo-elements and pseudo-classes?

Pseudo-elements: Insert additional elements or styles before and after content elements that are not actually generated in the document. They are only visible externally, but they are not found in the source code of the document, and are therefore referred to as “pseudo-” elements. Such as:

p::before {content: "Chapter one:"; }p::after {content: "Hot!"; }p::first-line {background: red; }p::first-letter {font-size: 30px; }Copy the code

Pseudo class: Adds a special effect to a particular selector. It adds categories to existing elements and does not create new elements. Such as:

a:hover {color: #FF00FF}
p:first-child {color: red}
Copy the code

Understanding of box models

CSS3 box model has the following two types: standard box model, IE box model

The box model consists of four parts: Margin, border, padding, and Content.

The difference between the standard box model and IE box model is that the corresponding range of width and height is different: The width and height attributes of the standard box model contain only content, while the width and height attributes of the IE box model contain border, padding, and content.

You can change the box model of an element by modifying its box-sizing attribute: content-box (default) box-sizing: border-box

Why is translate sometimes used to change position instead of position?

Translate does not trigger rearrangements and redraws in the browser, it only triggers composition. Efficient use of GPU absolute positioning leads to rearrangements, which in turn triggers redraws, inefficient use of CPU

What is the cause of the invisible space between Li and Li? How to solve it?

Browsers render white space characters (Spaces, newlines, tabs, and so on) between inline elements as a space. For aesthetic purposes, a

is usually placed on one line, which results in a newline character after a

newline, which becomes a space that takes up the width of one character.

Solutions:

• for<li>Set the float: left. Disadvantages: Some containers cannot be set to float, such as left-right focus graphs, etc.
• Will all<li>On the same line. Disadvantages: code is ugly.
• will<ul>Font :0 font-size:0 Inadequate:<ul>The other character sizes are also set to 0, requiring additional resetting and still showing white space in Safari.
• eliminate<ul>The spacing of letter-spacing:-8px, insufficient: this is also set<li>Within the character interval, so need to be<li>Set spacing in to the default letter-spacing:normal.

What’s new in CSS3

1. Add a variety ofCSSThe selectornth not
2. Rounded cornersborder-radius
3. rotatingtransform
4. shadowext-shadow
5. other

Common picture formats and usage scenarios

1. GIFDynamic figure
2. JPEGLossy color rich, suitable for storing photos, large files.
3. PNGLossless, small size, transparency support
4. SVGMagnification without distortion, suitable for logo icon
5. BMPLossless, uncompressed, larger file.
6. WebPGoogle’s new image format, volume ratiopngSmaller, less compatible.

Understanding CSS Sprites

CSS Sprites include all images involved in a page into a large image, and then use the combination of BACKground-image, background-repeat and background-position properties of CSS to locate the background.

Advantages:

• Using CSS Sprites can do a great jobTo reduceThe web pagehttpRequest, thus greatly improving the performance of the page, which isCSS Sprites2. the greatest advantage;
• CSS Sprites canTo reduceThe imagebyte, the number of bytes combining three images into one image is always less than the sum of the three images.

Disadvantages:

• In picture merging, multiple pictures should be combined into one picture in an orderly and reasonable way, and enough space should be left to prevent unnecessary background in the plate. In widescreen and high resolution adaptive pages, if the background is not wide enough, it is easy to break the background;
• CSS Sprites were relatively cumbersome to develop, requiring the use of Photoshop or other tools to measure the exact location of each background unit.
• Maintenance: CSS Sprites inmaintenanceWhen compared withtroubleWhen the background of the page is slightly changed, it is necessary to change the merged image, and try not to change the place that does not need to change, so as to avoid changing more CSS.

What are physical pixels, logical pixels and pixel density, and why do you need images like @3x and @2x for mobile development?

Taking iPhone XS as an example, when writing CSS code, the width of the unit px is 414px & 896px. That is to say, when giving a div element a width of 414px, the div will fill the width of the phone.

If you had a ruler to actually measure the physical pixels of this phone, it would actually be 1242*2688 physical pixels; After calculation, 1242/414=3, that is, on one side, one logical pixel =3 physical pixels, so the pixel density of this screen is 3, which is often said to be 3x screen.

For the picture, in order to ensure that it is not distorted, 1 picture pixel should correspond to at least one physical pixel. If the original picture is 500*300 pixels, then a picture of 1500*900 pixels should be placed on the 3x screen to ensure that 1 physical pixel corresponds to at least one picture pixel, so as to avoid distortion.

Of course, it is also possible to provide only the highest resolution images for all screens. While low-density screens don’t use as many image pixels, and waste bandwidth and download delays by downloading extra pixels, the result is that images are not distorted on any screen.

You can also use CSS media queries to determine different pixel densities to select different images:

my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }}Copy the code

What are the ways to optimize and improve CSS performance?

Loading performance:

• css The compressionTo reduce the file size.
• css A singleStyle margin – bottom: bottom; Margin – left: the left; Margin :top 0 bottom 0; High execution efficiency.
• To use less@import, recommended uselink, because link is loaded when the page is loaded, import is loaded after the page is loaded.

Selector performance:

• The keySelector, reduce the number of levels, not more than 3
• Try to useclassTo avoid using HTML tag selection
• Use lessoffspringSelector, descendant selectorHigh overhead
• To avoidinheritableThe properties of therepeatdefine
• Avoid the use ofwildcardRule that only the required elements are processed

Rendering performance:

• Use high performance attributes carefully:floating,positioning.
• Minimize pagesrearrangement,redraw.
• If the value of the attribute is 0, the value is not addedunit.
• Property value is floating decimal 0.**, okomitZero before the decimal point.
• Do not use@importPrefix, which affects CSSLoading speed.

Maintainability:

• Pull awaycssTo improvereusability.
• Style and ContentThe separation ofTo improvemaintainability.

What is the CSS preprocessor/post-processor? Why use them?

Preprocessors, such as less and sass, are used to precompile SASS or LESS, increasing the reusability of CSS code. Hierarchy, loops, variables, loops and other functions make UI components easier to develop and maintain.

Postprocessors, such as PostCSS, are usually effective at processing CSS according to the CSS specification in the finished stylesheet. The most common is to add browser private prefixes to address cross-browser compatibility issues.

Reasons for use:

1. The structure is clear and convenientextension
2. It can be very convenientshieldingDifferences in browser private syntax
3. The perfectCompatible withThe CSS code can be applied to older projects
4. Can be easily implementedMultiple inheritance

When does an inline-block display a gap?

There are mainly the following three situations:

• There will be gaps when there are Spaces, okDelete the blank spaceTo solve;
• marginIf it’s positive, it can bemarginusenegativeTo solve;
• usefont-sizeTo resolve the problem, set font-size:0, letter-spacing, and word-spacing.

Single-line, multi-line text overflow hiding

Single-line text overflow

overflow: hidden; // Overflow is hiddentext-overflow: ellipsis; // Overflow is shown with ellipsiswhite-space: nowrap; // Specifies that the text in a paragraph does not break a lineCopy the code

Multiline text overflow

overflow: hidden; // Overflow is hiddentext-overflow: ellipsis; // Overflow is shown with ellipsisdisplay: -webkit-box; // display as elastic expansion box model. -webkit-box-orient: vertical; // Set the arrangement of child elements of the flex box: vertical arrangement from top to bottom -webkit-line-clamp:3; // The number of rows to displayCopy the code

Understanding of media queries?

<! CSS media query in link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<! CSS media query in stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none; }}</style>
Copy the code

Simply put, @Media can be styled differently for different screen sizes, especially for responsive pages.

Understanding of the CSS engineering

CSS engineering is to solve the following problems: macro design: how to organize CSS code, how to split, how to design the module structure? Coding Optimization: How to write better CSS? Build: What can I do with my CSS so that it packs optimally? Maintainability: easy to change, easy to take over

The following three directions are more popular, very good universality of CSS engineering practice: preprocessor: Less, Sass, etc.; Postprocessor: PostCSS Webpack Loader

How to use Webpack to realize the processing of CSS: CSS-loader: import THE CSS module, compile the CSS code; Style-loader: creates a style label and writes CSS content to the label.

In practice, csS-loader must be executed before style-loader. Because you can’t insert CSS code until the compilation process is complete; If uncompiled code is inserted ahead of time, WebPack will not understand the mess and will report errors relentlessly.

How do I determine if an element has reached the viewable area

Take picture display as an example:

• window.innerHeightIs the height of the browser viewable area;
• document.body.scrollTop || document.documentElement.scrollTopIs how far the browser has scrolled;
• imgs.offsetTopIs the height of the top of the element from the top of the document (including the distance of the scroll bar);
• Content reaching the display area:img.offsetTop < window.innerHeight + document.body.scrollTop;

Under what circumstances does the Z-index attribute fail

Usually the z-index is used in two overlapping labels, and the larger the z-index value is, the higher it is. The position attribute of the Z-index element must be relative, Absolute, or fixed.

The Z-index attribute is invalid in the following cases:

• The parent element position isrelative, the z-index of the child element is invalid. Solution: Change position to absolute or static;
• The element does not set the position property to non-static. Fix: Set the position attribute of this element to relative, absolute or fixed.
• Element is set at the same time as z-index is setfloatFloating. Solution: Remove float, insteadDisplay: inline - block;

What attributes does a transform have in CSS3

• Translate displacement
• The rotate rotating
• Scale zooming
• Skew Angle cutting

Common CSS layout units

Pixel PX base layout unit %, the percentage relative to the parent element, to achieve a responsive effect. Em is a multiple of the text of the parent element. If font size is not set for the parent element, it is relative to the browser’s default font size (default 16px). Rem multiple of font-size of the root element. Function: REM can achieve simple responsive layout, you can use the ratio of font size to screen size in HTML elements to set the value of font size, so that when the screen resolution changes, the elements also change.

Vw: The window width is 100vw relative to the window width; Vh: the window height is 100vh relative to the window height; Vmin: smaller value in VW and VH; Vmax: larger value in VW and VH;

The difference between vw and percentage is vw relative to the window and % relative to the parent element

Px, EM, REM differences and use scenarios

The difference between the three:

• pxAre fixed pixels that, once set, cannot be changed to fit the page size.
• em 和 remMore flexible than PX, they areThe relativeA unit of length that is not fixed in length and is more suitable for responsive layouts.
• Em is relative to thatThe parent elementTo set the font size, so there is a problem. For any element setting, you may need to know the size of its parent element. And REM is relative to thetaThe root element, which means that only one reference value needs to be determined at the root element.

Usage Scenarios:

• For just need to adaptA small number ofMobile devices, and resolution has little impact on the page, usepxCan.
• For the need to fitA variety ofMobile devices, userem, such as the need to adapt to iPhone and iPad and other resolution differences are quite large devices.

How to adapt mobile terminals according to the design draft?

There are two main dimensions of mobile adaptation:

Adapt to different pixel density, according to different pixel density, use CSS media query, select different accuracy of the picture, to ensure that the picture will not be distorted; Different screen sizes, because different screens have different logical pixel sizes, using px units directly will make the development page look accurate on one phone, but distorted on another. In order to adapt to different screen sizes, the contents of the design draft should be scaled back.

To make the page size adaptive, use relative units such as REM, EM, VW, vH, etc.

Concept and basic principles of responsive design

A responsive website is one that can accommodate multiple terminals.

About the principle: The basic principle is through the media query (@media) query detection of different device screen size for processing.

About compatibility: the page header must have a meta declared viewport.

<meta name="viewport" content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
Copy the code

Why do I need to clear floats? The way to clear the float

Float definition: in a non-Ie browser, the height of the container is not set and when the child element floats, the height of the container cannot be stretched by the content. At this point, content spills out of the container and affects the layout. This phenomenon is called floating (overflow).

How float works:

• Floating elements leave the document flow and do not occupy space (causing “height collapse”)
• The floating element touches the border that contains it or the border of another floating element

A floating element can be moved left and right until it encounters another floating element or the include box on its outer edge. Float boxes are not a normal flow in a document flow, and when an element floats, it does not affect the layout of block-level elements, only the layout of inline elements. The normal flow in the document flow will behave as if the float box does not have the same layout pattern. When the height of the containing box is smaller than that of the floating box, a height collapse occurs.

Floating elements cause problems?

• The height of the parent element cannot be spread out, affecting elements at the same level as the parent element
• Non-floating elements of the same class as floating elements follow
• If the floating element is not the first element, the element before it must also float, otherwise the display structure of the page will be affected

How does the clear property clear floats?

Using the clear property to clear the float, the syntax is as follows:

clear: none|left|right|both
Copy the code

Clear :left: clear:right: clear:right: clear:left: clear:right: clear:right: clear:left: clear:right: clear:right: clear:left: clear:right: clear

“The edge of an element box must not be adjacent to the float element in front of it.” The clear property is set to prevent the float element from affecting the element, not to clear the float.

Note also that the clear attribute means that the edge of the element box cannot be adjacent to the front floating element. Note that the “front” three words, i.e. the clear attribute does not care about the “back” floating element. Given that the float property is either left or right, and since the clear property does not care about the “following” float element, clear:right must not be valid when clear:left is valid. Clear :left = clear:both; Similarly, clear:right if valid is the same as setting clear:both. Clear :left and clear:right have no value at all, at least in the CSS world, so use clear:both.

The float is usually cleared using pseudo-elements:

.clear::after{
  content: ' ';
  display: block;
  clear: both;
}
Copy the code

The clear attribute is valid only for block-level elements, while pseudo-elements such as ::after default to inline levels, which is why the display attribute is set to clear float effects with pseudo-elements.

Understanding BFC, how to create BFC

Let’s start with two related concepts:

• Box: A Box is the object and basic unit of CSS layout. A page is composed of several boxes. This Box is called the Box model.
• A rendering area on a page with a set of rendering rules that determine how its children will be positioned and how they relate to and interact with other elements.

A Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where block-level boxes are generated during layout and where floating elements interact with other elements.

In plain English: A BFC is an independent layout environment, which can be understood as a container. In this container, items are placed according to certain rules without affecting items in other environments. If an element meets the conditions that trigger the BFC, the layout of elements in the BFC is unaffected by external influences.

Conditions for creating a BFC:

• Root element: body;
• Element set float: float values other than None;
• Element sets absolute position: position (absolute, fixed);
• Display: Inline-block, table-cell, table-caption, flex, etc.
• The overflow values are hidden, auto, scroll.

BFC features:

• Vertically, top-down, the same way document flow is arranged.
• Margins of two adjacent containers in the BFC will overlap
• When calculating the height of the BFC, you need to calculate the height of the floating element
• The BFC region does not overlap with the floating container
• BFC is a separate container, and the elements inside the container do not affect the elements outside the container
• The left margin value of each element touches the left border of the container

Functions of BFC:

• Solve the problem of margin overlap: since BFC is an independent region, the internal elements and external elements do not affect each other. By changing two elements into two BFC, the problem of margin overlap can be solved.
• Fixed height collapse: After floating the child element, the parent element will have height collapse, i.e. the height of the parent element will be 0. To solve this problem, simply turn the parent element into a BFC. A common approach is to set overflow: Hidden to the parent element.
• Create an adaptive two-column layout: You can use this to create an adaptive two-column layout with a fixed width on the left and an adaptive width on the right.

<div class="left"> < /div>
<div class="right"> < /div>

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
Copy the code

Set float:left and overflow: Hidden on the right. This triggers a BFC on the right, and the area of the BFC does not overlap with the floating element, so the two sides do not overlap, enabling an adaptive two-column layout.

What is margin overlap problem? How to solve it?

Problem Description:

The upper and lower margins of two block-level elements may be merged (folded) into a single margin that takes the larger of the two margins. This behavior is called margin folding. Note that the margins of floating elements and absolutely positioned elements out of the document flow do not collapse. Overlap only occurs in the vertical direction.

Calculation principle:

The calculation principle of margins after folding and merging is as follows:

• If both are positive, take the greater
• If it’s a positive and a negative, you take the absolute value of the positive minus the negative
• When both are negative, take the one with the highest absolute value

Solutions:

There are two main types of folding: brothers overlap and fathers overlap

1. Overlap between brothers

• The bottom element becomes an inline box: display: inline-block
• The bottom element sets the float: float
• The position of the bottom element has a value of Absolute /fixed

2. Overlap between father and son

• The parent element is added: overflow: hidden
• Add a transparent border to the parent element: border:1px solid transparent
• Child elements become inline boxes: display: inline-block
• Adds a floating attribute or location to the child element

The cascading order of elements

Stacking order, known as stacking order, signifies that elements are stacked in a specific vertical order. Here are the cascading rules for the box model:

For the figure above, from top to bottom:

1. Background and border: Creates the background and border of the current cascading context element.
2. Negative Z-index: The element in the current cascade context whose Z-index attribute value is negative.
3. Block-level box: non-inline non-positioned descendant elements in the document flow.
4. Float box: Unpositioned float element.
5. Inline box: inline level non-positioned descendant elements within the document flow.
6. Z-index :0: indicates the location element whose cascade level is 0.
7. Positive Z-index: Positioning element whose z-index attribute value is positive.

::: tip indicates that when the positioning element z-index:auto, the generation box level in the current context is 0, and no new context is created, except for the root element. : : :

What are the properties of position, and what are the differences

position	There are the following attribute values:
Attribute values	An overview of the
absolute	Generates an absolute positioned element relative to a parent element other than a static positioned element. The position of an element is specified by the left, top, right, and bottom attributes.
relative	Generates a relatively positioned element that is positioned relative to its original position. The position of an element is specified by the left, top, right, and bottom attributes.
fixed	Generates an absolutely positioned element that specifies its position relative to the screen viewport. The position of the element does not change as the screen scrolls, such as the back to the top button
static	Default, no positioning, elements appear in normal document flow, top, bottom, left, right or Z-index declarations are ignored, block-level elements are arranged vertically from top down, and row-level elements are arranged vertically from left
inherit	Specifies that the value of the position attribute be inherited from the parent element

The positioning methods of the first three are as follows:

Relative: The position of an element is always relative to its own position and does not affect other elements.

Fixed: The element is positioned relative to the window (or iframe) boundary and has no relation to other elements. But it is destructive, causing changes in the position of other elements.

Absolute: The positioning of elements is much more complex than the first two. If top and left are set for absolute, how does the browser determine its vertical and horizontal offsets? Answer is that the browser will recursively find all the element’s parent element, if found a setting position: relative or absolute/fixed element, is based on the element orientation, if not found, the boundary position in browsers. As shown in the following two figures:

Display, float, position

1. First check whether the display attribute is None. If none, the values of the position and float attributes do not affect the final performance of the element.
2. Then determine whether the value of position is absolute or fixed. If so, the float property is invalid and the display value should be set to table or block. The conversion depends on the initial conversion value.
3. If the value of position is not absolute or fixed, the float property is determined to be None. If not, the value of display is converted according to the above rules. Note that if the value of position is relative and the value of the float property is present, relative is positioned relative to the final position after the float.
4. If float has a value of None, it determines whether the element is root, if so the display attribute is converted according to the above rules, if not, the specified display attribute value is left unchanged.

Position: Absolute and position:fixed have the highest priorities. When they exist, the float does not work and the display value needs to be adjusted. Second, adjust display when the float property of the element is not None or when it is the root element; Finally, display property values are the same as set values for non-root elements, non-floating elements, and non-absolutely positioned elements.

The similarities and differences between absolute and fixed

Thing in common:

• Change the rendering of inline elements by setting display toinline-block
• The elementOut of theNormal document flow no longer takes up physical document space
• coverThe positioningThe document element

Difference:

• absolute 与 fixedThe root element of,absoluteThe root element of thefixedThe root element is the browser.
• In a page with scroll bars,absoluteIt moves with the parent element,fixedFixed to the specific location of the page.

Understanding of sticky localization

Sticky positioning sticky positioning sticky positioning sticky positioning Syntax: position: sticky; Location based on the user’s scrolling position.

Sticky positioning elements are dependent on user scrolling, switching between position:relative and position:fixed. It behaves like position:relative; When the page scrolls beyond the target area, it behaves like Position: Fixed; It will be fixed in the target position. Element positioning is represented by relative positioning before crossing a specific threshold, and then fixed positioning. This specific threshold refers to one of top, right, bottom or left, in other words, to specify one of the four thresholds of top, right, bottom or left for sticky positioning to take effect. Otherwise it behaves the same as relative positioning.

Remember, remember (° °) Blue ✿

---

O (~ ▽ ~)d Don’t get lost

Favorites ✋🏻 + Follow

Thank you blue