精华内容
下载资源
问答
  • 在页面固定div位置实示例

    热门讨论 2012-08-07 16:12:24
    在页面固定div位置实示例,两种方法比较
  • 2019/5/23补充 ↓ css实现按钮固定在底部 按钮固定在底部 css: <style> .bottom{position:fixed;...html: <div> <div class="bottom"> <input type="submit" value="...

    2019/5/23补充

    css实现按钮固定在底部

    按钮固定在底部

    css:

    <style>
    .bottom{position:fixed; bottom:0;}
    </style>

    html:

    <div>
        <div class="bottom">
            <input type="submit" value="底部按钮"  class=""/>
        </div>
    </div>

     


     

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

    代码如下:

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

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

    <div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
    <table width=""100% style="position: absolute; width:260px; right
    展开全文
  • div position参数设置为fixed 其相对于浏览器为绝对位置,通过设置right和top将div固定在右上角。 table position参数设置为absolute,其相对于第一层div绝对定位,通过设置right和top将table固定div容器的右上...

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

    代码如下:

    <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容器的右上角。



    展开全文
  • 固定div位置,不随滚动条上下动

    万次阅读 2015-01-14 10:46:27
    更多2019年的技术文章,...div中的style属性中的一个关键字,表明了该div所在的位置以及位置本身的属性。 position有四个值可选:static,absolute,fixed,relative。 若要使得div相对于浏览器窗口固定,即不随...

    更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~

    1、position

    div中的style属性中的一个关键字,表明了该div所在的位置以及位置本身的属性。

    position有四个值可选:static,absolute,fixed,relative。

    若要使得div相对于浏览器窗口固定,即不随滚动条的变化而上下移动,可以用fixed属性。最近比较忙,抽不出时间来具体的写详细用法,具体的用法见:http://blog.csdn.net/marty_zhu/article/details/1910597

    还有一点要指出的是:我用bootstrap3开发的界面,本来一行分为12个栅格,但是如果使用了fixed属性,会破坏bootstrap3中设定的栅格的格式,所以,为了在界面上达到想要的效果,就要结合js去设置div的高度、宽度、内边距padding、外边距margin等。

    2、js获得当前窗口的高度和宽度

    高度可以用$(window).height()获得,宽度可以用$(window).width()获得。这里的高度、宽度指的是当前浏览器窗口的大小。

    对于获得div的高度和宽度,用

    var height = document.getElementById("divId").offsetHeight;
    var width = document.getElementById("divId").offsetWidth;

     

    设置div的高度:

    document.getElementById("divId").height = height;
    document.getElementById("divId").width = width;

     

     

     

    3、div置于最前面,即div之间的覆盖问题

    style属性中有一个"z-index"关键字,可以设定多个div之间的覆盖关系。数值越大,表示越在上层。

    可参考:http://blog.sina.com.cn/s/blog_5bd6b45101014h2i.html

    4、div的透明设置

    还是style属性中的"opacity"关键字。范围从0~1。0表示全透明,1表示不透明。

     

    更多2019年的技术文章,欢迎关注我的微信公众号:码不停蹄的小鼠松(微信号:busy_squirrel),也可扫下方二维码关注获取最新文章哦~

    展开全文
  • 固定div位置,不随滚动条滚动

    千次阅读 2012-08-07 16:05:00
    我们在html页面中的某处,可能要固定div位置,下面我们编写js来控制 1、只能在初始页面的可视区域固定div 编写js代码: jQuery.fn.floatdiv=function(location){ //判断浏览器版本 var isIE6=false; var ...

    我们在html页面中的某处,可能要固定div的位置,下面我们编写js来控制

    1、只能在初始页面的可视区域固定div

    编写js代码:

    jQuery.fn.floatdiv=function(location){
    		//判断浏览器版本
    	var isIE6=false;
    	var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
    	if(Sys.ie && Sys.ie=="6.0"){
    		isIE6=true;
    	}
    	var windowWidth,windowHeight;//窗口的高和宽
    	//取得窗口的高和宽
    	if (self.innerHeight) {
    		windowWidth=self.innerWidth;
    		windowHeight=self.innerHeight;
    	}else if (document.documentElement&&document.documentElement.clientHeight) {
    		windowWidth=document.documentElement.clientWidth;
    		windowHeight=document.documentElement.clientHeight;
    	} else if (document.body) {
    		windowWidth=document.body.clientWidth;
    		windowHeight=document.body.clientHeight;
    	}
    	return this.each(function(){
    		var loc;//层的绝对定位位置
    		var wrap=$("<div></div>");
    		var top=-1;
    		if(location==undefined || location.constructor == String){
    			switch(location){
    				case("rightbottom")://右下角
    					loc={right:"0px",bottom:"0px"};
    					break;
    				case("leftbottom")://左下角
    					loc={left:"0px",bottom:"0px"};
    					break;	
    				case("lefttop")://左上角
    					loc={left:"0px",top:"0px"};
    					top=0;
    					break;
    				case("righttop")://右上角
    					loc={right:"0px",top:"0px"};
    					top=0;
    					break;
    				case("middletop")://居中置顶
    					loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};
    					top=0;
    					break;
    				case("middlebottom")://居中置低
    					loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};
    					break;
    				case("leftmiddle")://左边居中
    					loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};
    					top=windowHeight/2-$(this).height()/2;
    					break;
    				case("rightmiddle")://右边居中
    					loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};
    					top=windowHeight/2-$(this).height()/2;
    					break;
    				case("middle")://居中
    					var l=0;//居左
    					var t=0;//居上
    					l=windowWidth/2-$(this).width()/2;
    					t=windowHeight/2-$(this).height()/2;
    					top=t;
    					loc={left:l+"px",top:t+"px"};
    					break;
    				default://默认为右下角
    					location="rightbottom";
    					loc={right:"0px",bottom:"0px"};
    					break;
    			}
    		}else{
    			loc=location;
    			alert(loc.bottom);
    			var str=loc.top;
    			//09-11-5修改:加上top为空值时的判断
    			if (typeof(str)!= 'undefined'){
    				str=str.replace("px","");
    				top=str;
    			}
    		}
    		/*fied ie6 css hack*/
    		if(isIE6){
    			if (top>=0)
    			{
    				wrap=$("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>");
    			}else{
    				wrap=$("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
    			}
    		}
    		$("body").append(wrap);
    		
    		wrap.css(loc).css({position:"fixed",
    			z_index:"999"});
    		if (isIE6)
    		{
    			
    			wrap.css("position","absolute");
    			//没有加这个的话,ie6使用表达式时就会发现跳动现象
    			//至于为什么要加这个,还有为什么要加nothing.txt这个,偶也不知道,希望知道的同学可以告诉我
    			$("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");
    		}
    		//将要固定的层添加到固定层里
    		$(this).appendTo(wrap);
    	});
    };

    在html页面中调用:

    $('#scoll_div_id').floatdiv({bottom:"50px"});

    scoll_div_id当然为div的id属性,距离底部50px

    2、可固定div出现的任何位置,让其不随浏览器滚动而变化

    js脚本代码:

     $.fn.smartFloat = function() {
         var position = function(element) {
            var top = element.position().top, pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });    
                    } else {
                        element.css({
                            top: scrolls
                        });    
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });    
                }
            });
        };
        return $(this).each(function() {
            position($(this));                         
        });
      };

    div调用:

    //绑定
    $("#float").smartFloat();

    这种方式更加灵活,要比较两种的区别,大家得自己尝试一遍。

    实例代码下载地址:http://download.csdn.net/detail/harderxin/4482704









    展开全文
  • 下面小编就为大家带来一篇html css 控制div或者table等固定在指定位置的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考,一起跟随小编过来看看吧
  • 纯CSS实现DIV悬浮(固定位置)

    万次阅读 多人点赞 2018-06-27 16:49:24
    纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下: 实现代码: <!DOCTYPE html> <html> <head> <...
  • *pos:object/string 指定固定到的位置,类型为object时,使用json方式如{right:200,bottom:50} ,为string时可选参数如下: *cc,正中间,lc 左边,rc 右边 *lt 左上角,ct 上边,rt 右上角 *lb 左下角,cb 底部...
  • html中有关如何固定div大小的问题

    千次阅读 2015-09-04 09:19:41
    div的属性中有width和length两条属性,不过这两条属性规定的是div内部的内容宽度以及高度,并不是div的大小,ex如果设置wid为300,len为300,此时如果设置padding-left为100,那么div的总宽度就变成了400。...
  • html 两块div,左侧div固定宽度200px,右侧div宽度如何写才能填满浏览器右侧部分(除了calc的方法外)
  • html底部div固定在底部

    千次阅读 2016-08-24 08:56:42
    整体结构: 保险购买 <div class="footer_div2"> <a href="#"> 我的账户 </div> 样式描述: .footer_div
  • bootstrap---固定div/固定导航栏

    千次阅读 2019-04-10 17:51:04
    在顶部固定 <div class="navbar navbar-fixed-top">... 要固定html或者其他内容 </div> 在底部固定 <div class="navbar navbar-fixed-bottom"> 要固定html或者其他内容 </div> ...
  • js:滚动到一定位置固定div在顶部

    千次阅读 2019-03-19 20:29:04
    //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $(".flightInfoBox").css({"position":"sticky","top":0}); }else if(scroH){ $(".flightInfoBox").css({...
  • 很高兴,我们在阅读了相关的注释后,我们大概能看到fixed是比较符合我们的需求的: fixed: 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及...
  • 这几天做一个页面,用到div滑动到一定的位置然后固定,查找了好久的资料才解决,这里做一个总结。 下面我会贴出代码,代码中会详细解释,如果有不懂的可以给我留言。 注: 1、 单纯的copy一下代码是看不到运行的...
  • 项目快结了,所以就做一下总结,以便以后复习。 项目主页的左侧菜单部分,界面要求就是上方为项目logo以及显示用户,下方需要显示版权,中间部分...HTML: CSS: .header{ position:absolute; top
  • DIV一直固定在屏幕的某个位置

    千次阅读 2013-11-05 10:44:04
    <html xmlns="http://www.w3.org/1999/xhtml"> <title></title> #low_right { position: fixed; width: 90px; height: 90px; background: #eee;... <div id="low_right"> 右下角 </div> </html>
  • 弹出div固定到相应的位置

    千次阅读 2018-05-22 08:50:47
    第一步: 设计一个div对象放入html页面中并设置相应的属性 &lt;span id = "peizhi"&gt;查询&lt;/span&gt;&lt;div id="mydiv1" class="na"&gt;&l
  • 如果想将超出div高度和宽度的内容隐藏就用overflow:hidden; 如果想让超出的内容显示而div宽高不变,用overflow:auto; 在原来的div宽高基础上出现滚动条; overflow-x:hidden; /*设置宽度超出div宽度后自动隐藏*/ ...
  • 头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:...
  • DIV位置调整代码

    千次阅读 2019-09-14 05:32:11
    本文转载于:猿2048网站2018.3.29 DIV位置调整代码 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></ti...
  • JQuery实现fixed固定div

    千次阅读 2013-04-30 16:41:17
    1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 html xmlns="http://www.w3.org/1999/xhtml"> ... 4 title>右侧固定漂浮t
  • html固定浮动在底部div的实现效果

    千次阅读 2014-11-24 10:38:04
     <div class="piaofutiao"></div>  </div>    </html> 这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和scrollHeight的解释,这里说的是 document.body,如果是 HTML 控件...
  • 实现两个div,左边固定div宽度200px,右边div自适应 /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background
  • <div class= "container"> <div class="left"></div> <div class="right"></div> </div> .container{ position: relative; width: 200px; height: 600px; border: 1px solid red; } .left{ width:...
  • 在很多网站上面我们可以看到浏览器的两边都有广告,这些广告无论我们怎么滚动浏览器的滚动条它都出现在浏览器窗口的固定位置,也就是跟着滚动条一起滚动。对于这种效果只需要在div的样式中设置position为fixed即可。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,093
精华内容 43,237
关键字:

html固定div位置