Home > Web Front-end > HTML Tutorial > 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
Release: 2016-06-24 12:13:11
Original
874 people have browsed it

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>
Copy after login



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>
Copy after login


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




Increase your popularity~~~

Thank you, Floor 1, Floor 2...

It’s great to use CSS. . .

Come and join us, hahaha...

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template