精华内容
下载资源
问答
  • 纯CSS实现DIV悬浮(固定位置)

    万次阅读 多人点赞 2018-06-27 16:49:24
    纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下: 实现代码: <!DOCTYPE html> <html> <head> <...

            纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下:

     

    实现代码:

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>DIV悬浮示例-纯CSS实现</title>


    <style type="text/css">
    /*设置了高度,可以上下滚动*/
    body {
    height: 1800px;
    background:#dddddd;
    }


    /*div通用样式*/
    div{
    background: #1a59b7;
    color:#ffffff;
    overflow: hidden;
    z-index: 9999;
    position: fixed;
    padding:5px;
    text-align:center;
    width: 175px;
    height: 22px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    }


    /*右上角*/
    div.right_top{
    right: 10px;
    top: 10px;
    }


    /*右下角*/
    div.right_bottom{
    right: 10px;
    bottom: 10px;
    }


    /*屏幕中间*/
    div.center_{
    right: 45%;
    top: 50%;
    }


    /*左上角*/
    div.left_top{
    left: 10px;
    top: 10px;
    }


    /*左下角*/
    div.left_bottom{
    left: 10px;
    bottom: 10px;
    }
    </style>


    </head>
    <body >
    <div class="right_top"> 我是右上角悬浮的div</div>
    <div class="right_bottom"> 我是右下角悬浮的div</div>
    <div class="center_"> 我是屏幕中间悬浮的div</div>
    <div class="left_top"> 我是左上角悬浮的div</div>
    <div class="left_bottom"> 我是左下角悬浮的div</div>
    </body>
    </html>

     

     

    展开全文
  • 悬浮固定DIV_demo,http://blog.csdn.net/ymruseuse/article/details/78589480
  • 一个小需求,页面过长,业务希望将按钮悬浮于页面上,不要一下拉就盖掉操作按钮。

    一个小需求,页面过长,业务希望将按钮悬浮于页面上,不要一下拉就盖掉操作按钮。

    代码如下:

    <div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
    <table width=""100% style="position: absolute; width:260px; right: 0px; top: 0px;">
    //table 内部控件代码
    </table>
    </div>

    div position参数设置为fixed 其相对于浏览器为绝对位置,通过设置right和top将div固定在右上角。

    table position参数设置为absolute,其相对于第一层div绝对定位,通过设置right和top将table固定在div容器的右上角。



    展开全文
  • NULL 博文链接:https://luanxiyuan.iteye.com/blog/1874189
  • 右边的button标签希望固定位置,不会因为p标签内的内容长度改变而导致button位置改变 <p><img alt="" height="73" src="https://img-ask.csdnimg.cn/upload/1621827946003.png" width="1535" /></p>
  • div悬浮固定

    千次阅读 2017-11-21 12:15:04
    悬浮相对固定

    demo传送:http://download.csdn.net/download/ymruseuse/10126975

    方式一:CSS实现

    <div id="erp" style="z-index: 9999; position: fixed ! important; right: 30px; top: 10px;">  
    <img src="../../images/favicon.ico"  width="20" height="20"
    style="position: absolute;right: 0px; top: 0px;" />  
    </div>

    div position参数设置为fixed 其相对于浏览器为绝对位置,通过设置right和top将div固定在右上角。

    img position参数设置为absolute,其相对于第一层div绝对定位,通过设置right和top将table固定在div容器的右上角。

    参考地址:http://blog.csdn.net/qq_26817251/article/details/53648685


    方式二:JQ实现(引用一下jq,复制下面代码即可)

    <!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=gb2312" />
    <title>CSS固定定位</title>
    
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    height:100%;
    overflow:hidden;
    }
    body {
    height:100%;
    overflow:auto;
    }
    #fixedLayer {
    position:absolute;
    }
    </style>
    <![endif]-->
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    </head>
    
    <body>
    <!--方式一-->
    <div id="fixedLayer" style="position:fixed; width:100px;line-height:50px;top:10px; left:10px;background: #fc6">固定不动</div>
    
    <!--方式二-->
    <div id="erp" style="z-index: 9999; position: fixed ! important; right: 30px; top: 10px;">  
    <img src="http://www.w3school.com.cn/i/eg_cute.gif" 
    style="position: absolute;right: 0px; top: 0px;" />  
    </div>
    
    
    <!--方式三-->
    <div id="myidd" class="fixediv leftadv"
    style="width:20px; z-index:20px; position:absolute; right:100px; float:right; background:#eea;">
    <p>测试</p>
    <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
    </div>
    
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#myidd a").click(function(){
    		$("#myidd ").fadeOut(400);
    	});
    	$("#myidd ").floatadv();
    });
    
    jQuery.fn.floatadv = function(loaded) {
    	var obj = this;
    	body_height = parseInt($(window).height());
    	block_height = parseInt(obj.height());
    	
    	top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop());
    	if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };
    	
    	if(!loaded) {
    		obj.css({'position': 'absolute'});
    		obj.css({ 'top': top_position });
    		$(window).bind('resize', function() { 
    			obj.floatadv(!loaded);
    		});
    		$(window).bind('scroll', function() { 
    			obj.floatadv(!loaded);
    		});
    	} else {
    		obj.stop();
    		obj.css({'position': 'absolute'});
    		obj.animate({ 'top': top_position }, 400, 'linear');
    	}
    }
    </script>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    <p>dd</p>
    
    </body>
    </html>



    展开全文
  • <div id="float_father_2">相对固定(动)</div> 测试内容 测试内容 </div> <div id="float_left">左侧固定</div> <div id="float_right">右侧固定</div> //左右侧固定浮动的div建议放在html的最低部 //...

    <!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>e宝账--帮助中心</title>
    <script type="text/javascript">
    function scrollx(p) {
    var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;
    if (o) {
    cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
    if (p.r != undefined && p.l == undefined) {
    o.style.cssText += cssPub + ('right:'+p.r+'px;');
    } else {
    o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
    }
    if(p.f&&ie6){
    cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
    cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
    if (p.r != undefined && p.l == undefined) {
    o.style.cssText += cssRight + cssTop;
    } else {
    o.style.cssText += cssTop;
    }
    dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
    }else{
    if(!p.f){
    w.onresize = w.onscroll = function(){
    clearInterval(timer);
    timer = setInterval(function(){
    //双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
    var st = (dd.scrollTop||db.scrollTop),c;
    c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
    if(c!=0){
    o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
    }else{
    clearInterval(timer);
    }
    },10)
    }
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <div style="width:700px; margin:0 auto; height:1000px; background:#ccc">
    <div id="float_father">相对固定</div>
    <div id="float_father_2">相对固定(动)</div>
    <p>测试内容</p>
    <p>测试内容</p>
    </div>
    <div id="float_left">左侧固定</div>
    <div id="float_right">右侧固定</div>
    <script type="text/javascript">
    //左右侧固定浮动的div建议放在html的最低部
    //右侧固定
    scrollx({id:'float_right', r:0, t:200, f:1});
    //左侧固定
    scrollx({id:'float_left', t:200, f:1});
    //相对父级相定固定
    scrollx({id:'float_father', l:300, t:200, f:1});
    //页面滚动同时滚动固定对像
    scrollx({id:'float_father_2', l:500, t:300, f:0});
    /*
    scrollx参数说明

    id:浮动对象的id
    r:右边距(窗口右边距,不写为靠左浮动)
    l:左边距(距离父级对象的左边距) “r”和“l”只能有其中一个参数
    t:上边距(默认贴着底边,0是贴着顶边)
    f:1表示固定(不写或者0表示滚动)
    */
    </script>
    </body>
    </html>
    ---------------------
    作者:yaoyanzhu
    来源:CSDN
    原文:https://blog.csdn.net/yaoyanzhu/article/details/84378326
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • css实现按钮固定在底部 按钮固定在底部 css: <style> .bottom{position:fixed; bottom:0;} </style> html: <div> <div class="bottom"> <input type="submit" value="...
  • 蓝色的jquery固定div悬浮在线客服代码
  • .bottom_xf{ background-color:#1D69A9; width:100%; height:2.8em; margin:0 auto; overflow:hidden; position: fixed; bottom:0;} 转载于:https://www.cnblogs.com/weibo806/p/5767855.html
  • 纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下:实现代码:DIV悬浮示例-纯CSS实现/*设置了高度,可以上下滚动*/body {height:...
  • 关键用到的就是固定定位(position:fixed)和层叠属性(z-index) <div class="fix-box"></div> <style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; } </...
  • 【推荐】js+DIV悬浮窗定位到鼠标位置的源代码(2013-09-04 22:34:33)标签:评论完美兼容火狐,IE等浏览器,js+DIV悬浮窗定位到鼠标位置的源代码!转帖请注明出处,这可是本站的原创内容,亦是本站使用的代码var oSon = ...
  • .divClass { position: fixed; bottom: 0; left: 0; right: 0; height: 20px; background-color: #FFC0CB; } 页面顶部 css代码: .divClass { position: fixed; top: 0; left: 0; right: 0; height: 20px; ...
  • 使用css设置DIV固定悬浮

    千次阅读 2019-10-08 10:29:26
    有一个按钮的设计是需要一直呆页面右上角。 举一反三,实现右下、左上、左上、中间的悬浮效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ...
  • NULL 博文链接:https://luanxiyuan.iteye.com/blog/1879695
  • 很多网站都常见,比如说美丽说,还有本博,css实现div悬浮不动效果很简单,效果图就如本站所示,实现css代码如下:CSS固定定位{padding:0;margin:0;}div{width:100%;line-height:30px;background: red;border:1...
  • 首先,我们将目光投向了CSS...很高兴,我们阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的: fixed: 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过...
  • 我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果。传统的fixed实现:通过css中的属性position参数设为fixed,理由它相对于浏览器...
  • 获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。方法一:$(function() {var elm = $('.nav');var startPos = $(elm)....
  • // 判断滚动条的高度(大于240,给固定元素添加 class) if ( ele . scrollTop > 240 ) { editorNav . classList . add ( 'suspension' ) } else { editorNav . classList . remove ( '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,353
精华内容 1,741
关键字:

div悬浮在固定位置