Detailed explanation of fixed properties of CSS positioning properties-CSS Tutorial-php.cn

Detailed explanation of fixed properties of CSS positioning properties

WBOY

Release： 2022-08-02 18:09:15

Original

7865 people have browsed it

This article brings you relevant knowledge about css, which mainly introduces issues related to fixed positioning in CSS positioning attributes. Fixed positioning indicates that the position of the element relative to the browser window is Fixed position, it will not move even if the window is scrolled. Let’s take a look at it. I hope it will be helpful to everyone.

Detailed explanation of fixed properties of CSS positioning properties

(Learning video sharing: css video tutorial, html video tutorial)

CSS positioning attribute Detailed explanation of the fixed attribute

fixed positioning

The position of the element is a fixed position relative to the browser window.

It will not move even if the window is scrolled:

Fixed positioning is the position where the element is fixed in the browser's viewable area. Main usage scenario: The position of the element will not change when the browser page is scrolled.

Syntax:

选择器｛position:fixed;｝

Copy after login

Description

Fixed positioning means the element is fixed in the browser view District location. Fixed positioning can also be regarded as a special kind of absolute positioning.
The usage scenario is that when the browser page scrolls, the position of the element will not change.

Characteristics of fixed positioning

Mobile elements that use the browser's visual window as the reference point.
has nothing to do with the parent element.
Do not scroll with the scroll bar.
Fixed positioning does not occupy the original position. Fixed positioning is also off-label.

fixed is the attribute value of the position attribute. When the position attribute of an element is set to fixed, the element is fixed, and the fixed element will not change its position as the scroll bar is dragged. The position of fixedly positioned elements does not change within the field of view.

Fixed fixed positioning and absolute positioning are similar. They both allow elements to be displaced and separated from the document flow.

Grammar:

position:fixed;
top:像素值;
bottom;像素值;
left:像素值;
right:像素值;

Copy after login

"position:fixed;" is used in conjunction with the four attributes top, bottom, left and right, among which "position:fixed;" makes the element a fixed position element, and then use the four attributes top, bottom, left, and right to set the position of the element relative to the browser.

Not all of the four attributes top, bottom, left and right are used. Note that the reference objects of these four values are the four edges of the browser.

Examples are as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            h2.pos_abs {
                position: fixed;
                left: 100px;
                top: 120px
            }
            p{
                height: 100px;
                background-color: palegoldenrod;
            }
            p.p2{
                margin-top:120px ;
            }
        </style>
    </head>
 
    <body style="height: 1200px;">
        <h2 class="pos_abs">这是带有固定定位的标题</h2>
        <p>相对于浏览器窗口来对元素进行定位</p>
        <p class="p2">相对于浏览器窗口来对元素进行定位</p>
    </body>
 
</html>

Copy after login

Output results:

Detailed explanation of fixed properties of CSS positioning properties

Expand knowledge

How to position it on the right side of the main content

First let’s make the fixed positioning box left: 50%, and then go to the browser area General location.
Then let the fixed positioning and word margin-left: set the width of the main content to normal, so that we can see the fixed positioning and word on the right side of the center of the page

Note:

When we do not place the fixed box at the top, it will be covered by other divs. Be sure to Place the fixed box at the top

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Detailed explanation of fixed properties of CSS positioning properties. For more information, please follow other related articles on the PHP Chinese website!