Home  >  Article  >  Web Front-end  >  Looking for a CSS writing method for a floating advertising box_html/css_WEB-ITnose

Looking for a CSS writing method for a floating advertising box_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:13:11818browse

It is the kind that can be fixed at a certain position on the page and does not scroll as the page scrolls!


Reply to discussion (solution)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE6 position:fixed</title><style type="text/css">* { margin:0; padding:0;}#content{ height:2000px; }#a{ position:fixed; bottom:0; right:0; width:200px; height:60px; background:#F00;}/*IE6 fixed bug*/* html{overflow:hidden;}* html body{height:100%;overflow:auto;}* html #a{position:absolute;right:18px;}</style></head><body><div id="content">IE6 position:fixed</div><div id="a">IE6 position:fixed</div></body></html>



Or do it with js
<!doctype html><html>    <head>        <meta charset="gb2312" />        <style>            body { height:1850px; }            div {                position:absolute; top:0; right:0;            }        </style>    </head>    <body>        <div id="test">            <img src="http://avatar.profile.csdn.net/0/1/6/2_nglwcm.jpg" />        </div>        <script>            function $(o){return document.getElementById(o)}                        window.onscroll = function(){                $('test').style.top = (document.documentElement.scrollTop || document.body.scrollTop) + 'px'             }        </script>    </body></html>


For reference

I have a ready-made writing method, copied from the Discuz forum program. You can check it out for details: http://www.bacysoft.cn/thread-56 -1-1.html

Use position:fixed; calmcrime method

calmcrime has already answered very well, but the JS method needs to add the original height
window. onscroll = function()
{
$('test').style.top = Original height (document.documentElement.scrollTop || document.body.scrollTop) 'px'
}

Learned. HTML code

f6dad64138c04d12179482f307934dc6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e

Increase your popularity~~~

Thank you, Floor 1, Floor 2...

It’s great to use CSS. . .

Come and join us, hahaha...

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn