css定位图片位置不变的实现方法
程序员文章站
2022-04-02 14:51:34
...
css定位图片位置不变的实现方法：首先创建一个HTML示例文件；然后引入一个background背景图片；最后给该图片添加“position: fixed”样式即可固定图片位置并保持不变。
本教程操作环境：windows7系统、css3版、thinkpad t480电脑。
推荐：《css视频教程》
在css中，可以使用固定定位（position: fixed）来定位图片保持图片位置不变，让图片位置可以不随着文字的拖动而改变图片位置。
position: fixed用于生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
固定定位（position:fixed）：元素以相对浏览器窗口为基准进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。
示例：
<!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>
效果图：
说明：
从上面的示例看出：可以使用position: fixed来固定图片位置不变，让图片位置可以不随着文字的拖动而改变图片位置。
以上就是css定位图片位置不变的实现方法的详细内容，更多请关注其它相关文章！