position:fixed实现的信息流广告效果实例页面

展示

占位示例图片，信息流效果演示用。

占位示例图片，position:fixed实现。

占位示例图片，关键点是把position:fixed元素藏在列表的后面。

占位示例图片，主要通过z-index控制，这个iOS Safari效果OK。

代码

CSS代码：

.list {
    margin: 8px 0; 
    padding:16px; 
    background-color: #fff;
    position: relative;
    z-index: 1;
}
.adsense {
    display: block;
    height: 533.33px; 
    margin: 0 16px; 
    background: #7069f5;
}
.adsense img {
    position: fixed;
    top: 0; 
    width: 400px;
}

HTML代码：

<div class="list">
    <p>占位示例图片...。</p>
    <p><img src="./mm1.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><img src="./mm6.jpg"></p>
</div>
<a href="#" class="adsense" target="_blank">
    <img src="./ad.jpg">
</a>
<div class="list">
    <p>占位示例图片，...</p>
    <p><img src="./mm3.jpg"></p>
</div>
<div class="list">
    <p>占位示例图片...</p>
    <p><./mm4.jpg"></p>
</div>