[CSS]实现令人烦人的小广告,绝对定位

最新推荐文章于 2025-04-01 22:13:19 发布

爱爬山的老虎

最新推荐文章于 2025-04-01 22:13:19 发布

阅读量205

点赞数 6

分类专栏：前端学习文章标签： css 前端 html css3

本文链接：https://blog.youkuaiyun.com/m0_73001740/article/details/146697365

版权

前端学习专栏收录该内容

12 篇文章

订阅专栏

问题描述

是否在浏览盗版网站里有那种一直在界面里的小广告,这是怎么实现的呢?

详细思考

那种是不随滚动而向上滑的,是一直在本页面里的,那就需要绝对位置

实现结果

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小广告实例</title>
  <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<a href="http://www.google.com"><img src="../image/img_3.png" alt="" class="a2"></a>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>
<p>q</p>

</body>
</html>

CSS

a{
    display: block;
}
.a2{
	/*调整图片大小*/
    width: 100px;
    height: 100px;
	/*使图片铺满指定大小*/    
    object-fit: cover;
    /*画个边框，更显*/
    border: #ff5000 1px solid;
}
.a2{
	/*核心代码，就两行*/
    position: fixed;
    left: 0;
}