How to achieve unchanged position of css positioning image-CSS Tutorial-php.cn

How to achieve unchanged position of css positioning image

藏色散人

Release： 2023-01-04 09:37:26

Original

3400 people have browsed it

The implementation method of css positioning the image position unchanged: first create an HTML sample file; then introduce a background background image; finally add the "position: fixed" style to the image to fix the image position and keep it unchanged. .

How to achieve unchanged position of css positioning image

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommendation: "css video tutorial"

In css, you can use fixed positioning (position: fixed) to position the image and keep the image position unchanged. The image position can be changed without dragging the text.

position: fixed is used to generate fixed-positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

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 positioning (position: fixed): The element is 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 will ignore its existence in positioning. The top, bottom, left, and right used at this time are also relative to the browser window.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.logo {
width: 540px;
height: 258px;
position: fixed;
background: url(https://www.baidu.com/img/bdlogo.png) no-repeat;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="logo"> </div>
111<br/> 111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111
<br/>111<br/>111<br/>111<br/>111<br/>111<br/>111<br/>
</body>
</html>

Copy after login

Rendering:

How to achieve unchanged position of css positioning image

Instructions:

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.

The above is the detailed content of How to achieve unchanged position of css positioning image. For more information, please follow other related articles on the PHP Chinese website!