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

Home

Web Front-end

CSS Tutorial

Detailed explanation of fixed properties of CSS positioning properties

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 02, 2022 pm 06:09 PM

css

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;｝

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:像素值;

"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 id="这是带有固定定位的标题">这是带有固定定位的标题</h2>
        <p>相对于浏览器窗口来对元素进行定位</p>
        <p class="p2">相对于浏览器窗口来对元素进行定位</p>
    </body>
 
</html>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles