How to use css to prevent elements from scrolling with the scroll bar

In css, you can use the position attribute to set the element not to scroll with the scroll bar, the syntax is "position:fixed". The position attribute specifies the positioning type of the element. When the value is fixed, the element is positioned relative to the browser window. No matter how the slider is moved, it will be fixed at the same position in the browser window.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can use fixed positioning (position:fixed;) to fix the position of an element so that the element does not scroll with the scroll bar.

fixed generates a fixed positioning element. The element is separated from the document flow and does not occupy the position of the document flow. It can be understood as floating above the document flow and positioned relative to the browser window.

Fixed positioned elements are positioned relative to the browser window. No matter how you move your slider, it will be fixed at a fixed position relative to the browser window. Also note that its sibling elements Its presence will be ignored in the location arrangement. The top, bottom, left, and right used at this time are also relative to the browser window.

Example:

nbsp;html>

    
        <meta>
        <style>
            .logo {
                width: 540px;
                height: 258px;
                position: fixed;
                background: url(猫/images/1.jpg) no-repeat;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }
        </style>
    

    
        <div> </div>
        布偶猫<br> 布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫
        <br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>布偶猫<br>
    

Rendering:

##As can be seen from the above example: you can use position: Fixed to fix the position of the picture unchanged, so that the position of the picture can not change with the dragging of the text.

Note:

In IE7 and above and in Firefox, Opera, and Safari, the CSS attribute "position:fixed" is supported. Its function is to fix the position of the element relative to the window.

But under IE6, the position:fixed attribute is not supported. At this time, we need to hack IE6.

Recommended learning:

css video tutorial

The above is the detailed content of How to use css to prevent elements from scrolling with the scroll bar. For more information, please follow other related articles on the PHP Chinese website!