关于设置图片fixed的问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{padding: 0;margin: 0;}
    a{text-decoration: none;}
    .global{width: 1500px;background-color: #fbeee2;
margin:auto;overflow: hidden;}
.logo{width: 200px;height: 80px;float: left;}
p{float: left;line-height: 80px;margin:  0 5em;}
.free{padding-left: 10em}
a:hover{color: #20a162}
.body{width: 1500px;height: 2000px;border: 1px solid;margin: 0 auto;}
.sidebar{background-color: red;width: 300px;height: 500px;float: left;}
.banner{background-color: blue;width: 1200px;height: 400px;float: left;}
.popular{background-color: orange;width: 1200px;height: 100px;float: left;}
body{background: url(img/1.jpg) no-repeat fixed left;clear: both;}
    </style>
 
</head>
<body>
<div>
<div class="global">
<div class="logo"><a href="https://www.imooc.com/"><img src="img/logo.png"></a></div>
<p class="free"><a href="https://www.imooc.com/course/list">免费课程</a></p>
<p><a href="https://www.imooc.com/course/list">职业路径</a></p>
<p><a href="https://coding.imooc.com/">实战</a></p>
<p><a href="https://www.imooc.com/wenda">猿问</a></p>
<p><a href="https://www.imooc.com/article">手记</a></p>
</div>
<div class="body">
<div class="sidebar"></div>
<div class="banner"></div>
<div class="popular"></div>
</div>
</div>
</body>
</html>

我设置了一张图片在左边不会随页面的滚动而滚动，但是，图片的右边一点被盖住了，我的问题是如何让图片浮在最上面。

桃花K 2018-12-23

源自：float浮动 3-3 Float案例演示（3）

收起

1回答

好帮手慕夭夭 2018-12-24 14:46:51

你好同学 , 因为你的代码中图片是给body设置的背景图 ,这时候body里面有元素自然会把背景图给挡住 ,背景图和背景色是一样的 , 没有办法去改变它的层级 . 例如一面墙贴了一个壁纸 , 然后在墙上挂了一台电视 ,电视肯定要挡住壁纸的 , 如果你想让壁纸显示在电视上面 , 就要把壁纸贴在电视上面了 ,显然是不合理的 .

如果同学想要实现左边图片固定 ,可以在html中设置一个空div , 给div设置宽高以及背景图 , 然后结合固定定位 ,让它固定在左边位置即可 . 例如: