This section describes five common positioning methods in the CSS

There are five kinds of positioning

1. The position attribute of the CSS

• static: Default, the element is in the normal document flow and is not specifically positioned.
• relative: Positioned relative to the element's initial position in the document flow.
• absolute: Positioning relative to the nearest located (non-static) ancestor element.
• fixed: Relative to browser window positioning, the element stays in the specified position even if the window scrolls.
• sticky: Based on the scroll positionrelativeandfixedSwitch between positioning.

2. Attributes used to locate elements

top, right, bottom, left: These attributes are used to specify the position of an element relative to its containing block (usually the parent element). They only work for elements that use relative positioning, absolute positioning, fixed positioning, or viscous positioning.

z-index: Specifies the stacking order of the elements. The higher the value, the closer the elements are. An element with a higher z-index value appears above an element with a lower z-index value.

3. Detailed description and examples of positioning types

1. Static positioning

Default location mode. Elements are arranged in a normal document flow and do not change position due to the positioning property. At this point, the top, right, bottom, left, and z-index properties will have no effect.

2. Relative positioning

Allows you to adjust the element to its original position. It doesn't leave the document flow, but it leaves the space in its original place.

.relative-box {
  position: relative;
}

3. Absolute positioning

The element is removed from the document stream and its location is determined relative to its nearest location ancestor. If no ancestor is located, it locates relative to the initial boundary of the document.

.absolute-box { 
  position: absolute;
}

4. Fix the position

The element is positioned relative to the window, so its position does not change as you scroll through the page. With fixed positioning, you can create elements that are fixed to a certain place on the page, such as navigation bars or suspended ads.

.fixed-box {
  position: fixed;
}

5. Sticky positioning

It combines relative and fixed positioning features. When the page scrolls to a specific location, sticky elements "stick" to a certain location in the window. Elements are positioned relative until they cross a certain threshold, and then become fixed. This positioning is often used to create elements that are fixed at the top or bottom of the page when scrolling, such as the navigation bar.

.sticky-box { 
  position: sticky;

4. Precautions

1. The document flow is affected

Absolute and fixed positioning can take elements out of the normal flow of the document, which can affect the layout of other elements.

2. Stack sequence

Be careful when using z-index to control the stacking order of elements to ensure that there are no unexpected overwrites.

3. Performance

Using a lot of positioning elements can affect the performance of your page, especially on mobile devices.

Step 4: Compatibility

Different browsers may interpret positioning properties slightly differently, and testing is required to ensure compatibility across browsers.

5. Scroll bar

When using fixed positioning, be aware that elements are fixed in the browser window, which can cause unnecessary scroll bars on pages with long content.

5. Practical application

1. The son abandons the father

The parent element.parent sets relative positioning, while the child element.child sets absolute positioning and is positioned in the center of the parent element through the top and left attributes. transform: translate(-50%, -50%); Center the child element in both vertical and horizontal directions. In this way, the child element is absolutely positioned relative to the parent element, that is, the child is not the parent phase.

HTML code:

<div class="parent"> <div class="child"> Child element </div> </div>

CSS code:

.parent { position: relative; /* Parent element set relative positioning */ width: 300px; height: 200px; } .child { position: absolute; /* Child element set absolute positioning */ top: 50%; /* Positioned vertically at 50% of the parent */ left: 50%; /* Horizontally positioned at 50% of the parent */ transform: translate(-50%, -50%); /* Center child element by translation */}

2. Ceiling effect

To achieve a cap effect in CSS, you can use the position: sticky property. This property allows the element to be fixed to the page when it scrolls to a specific position, as if it were attached to the top.

The.header element uses position: sticky; And set top: 0; To ensure that it is fixed at the top of the page. When scrolling the page, the.header will remain at the top of the viewport

<div class="header"> This is a top header </div> <div class="container"> <p> This is the content of the page. As you scroll through the page, the head is fixed at the top. </p> </div>

<style> .container { width: 100%; height: 1500px; /* To demonstrate the scrolling effect */ padding-top: 50px; /* Keep content unblocked by fixed headers */}.header {position: -webkit-sticky; /* Compatibility */ position: sticky; top: 0; /* Fixed at top */ background-color: #333; z-index: 1000; /* If there are other elements to cover at the top, use z-index */} </style>

To this article about the five common positioning methods in CSS detailed explanation of the article is introduced to this, more related CSS positioning methods please search the script home previous articles or continue to browse the following related articles, I hope you will support the script home in the future!

Latest comments