精华内容
下载资源
问答
  • 2019/5/23补充 ↓ css实现按钮固定在底部 按钮固定在底部 css: <style> .bottom{position:fixed; bottom:0;} </style> html: <div> <div class="bottom"> <input type="submit...

    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
    展开全文
  • 纯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 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容器的右上角。



    展开全文
  • html 两块div,左侧div固定宽度200px,右侧div宽度如何写才能填满浏览器右侧部分(除了calc的方法外)
  • 在页面固定div位置实示例

    热门讨论 2012-08-07 16:12:24
    在页面固定div位置实示例,两种方法比较
  • H5移动端div固定到底部实现底部导航条的几种方式 需求: 需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。效果如下: 这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。 ...

    H5移动端div固定到底部实现底部导航条的几种方式


    需求:

    需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。效果如下:

    这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。

    html结构如下:

    <div class="box">
        <div class="roll">滚动区域</div>
        <footer>底部固定菜单</footer>
    </div>
    <!---公用样式--->
    <style>
    html,body{
        margin:0;padding:0;height:100%;width:100%;
    }
    footer{
        background:#F2F3F6;max-width: 750px;width: 100%;height: 1rem;
    }
    </style>

    方法一:使用fixed

    .box{
            .roll{
                padding-bottom:1rem;
             }
        footer{
            position:fixed;bottom:0;z-index:999;
        }
    }

     

     

    方法二:使用absolute  

    .box{
        position: relative;height: 100%;
        .roll{
            position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
        }
        footer{
            position: absolute;bottom:0;
        }
    }

     

     

    方法三:使用flex 

    .box{
        display:flex;display: -webkit-flex;height:100%;flex-direction:column;
        .roll{
            flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
        }
    }

     

    总结

    1、底部定位为fixed或absolute的时候,出现优先级别较低,导致被其他div覆盖的情况,那么这里就需要用到z-index,来让他成为最高级别,不至于被覆盖。

    2、底部定位为fixed或absolute,存在输入框的时候,会出现如下情况:

    ios:激活输入框时,底部不会弹出来(合理)。
    Android:激活输入框时,底部会跟着输入框弹出来(不合理)  

    传统解决办法:通常将底部设置为fixed,当激活输入框的时候,将底部定位改为relative,即可兼容ios和Android。

    3、使用方法二或者方法三,需要设置-webkit-overflow-scrolling 属性。这样才能保证滚动区域的流畅性,-webkit-overflow-scrolling控制元素在移动设备上是否使用滚动回弹效果。

    4、在部分浏览器中设置overflow-y: scroll;会出现滚动条,这时候我们需要全局定义如下样式:

    ::-webkit-scrollbar{//scroll滚动条设置
            width: 0px; height: 0px; color: rgb(136, 0, 0);">#fff; 
    }

      

    5、移动端推荐使用方法三的布局形式。

    展开全文
  • html底部div固定在底部

    千次阅读 2016-08-24 08:56:42
    整体结构: 保险购买 <div class="footer_div2"> <a href="#"> 我的账户 </div> 样式描述: .footer_div
  • 固定div位置,不随滚动条上下动

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

    千次阅读 2013-12-18 10:04:52
    CSS部分: style type="text/css"> html,body{ overflow:hidden; margin:0px; width:100%; height:100%; } .virtual_body{width:100%; height:100%; overflow-y:scroll;....fixed_div{position:ab
  • 项目快结了,所以就做一下总结,以便以后复习。 项目主页的左侧菜单部分,界面要求就是上方为项目logo以及显示用户,下方需要显示版权,中间部分...HTML: CSS: .header{ position:absolute; top
  • 如果想将超出div高度和宽度的内容隐藏就用overflow:hidden; 如果想让超出的内容显示而div宽高不变,用overflow:auto; 在原来的div宽高基础上出现滚动条; overflow-x:hidden; /*设置宽度超出div宽度后自动隐藏*/ ...
  • 头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:...
  • div固定在浏览器顶部

    千次阅读 2018-04-22 19:31:22
    &lt;!doctype html&gt;&lt;html&gt;&...div固定在浏览器顶部&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"&gt;
  • html中有关如何固定div大小的问题

    千次阅读 2015-09-04 09:19:41
    div的属性中有width和length两条属性,不过这两条属性规定的是div内部的内容宽度以及高度,并不是div的大小,ex如果设置wid为300,len为300,此时如果设置padding-left为100,那么div的总宽度就变成了400。...
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动  html,body {  overflow:hidden;  margi
  • 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位置,不随滚动条滚动

    千次阅读 2012-08-07 16:05:00
    我们在html页面中的某处,可能要固定div位置,下面我们编写js来控制 1、只能在初始页面的可视区域固定div 编写js代码: jQuery.fn.floatdiv=function(location){ //判断浏览器版本 var isIE6=false; var ...
  • 利用JavaScript脚本,从浏览器中获取各个关于位置的参数,然后将其计算后,定位在窗体的右下角。可以承认,这个方法确实是比较自然的想法,也是很常见的方法,但是这样的方法有以下几个缺点: 1、使用了大量的...
  • Fixed header and footer for IE BODY { ...HTML { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px } BODY { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px;
  • 弹出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滑动到一定的位置然后固定,查找了好久的资料才解决,这里做一个总结。 下面我会贴出代码,代码中会详细解释,如果有不懂的可以给我留言。 注: 1、 单纯的copy一下代码是看不到运行的...
  • html中如何设置一个按钮相对于所在div位置而不是相对窗口的位置
  • HTML <div class="footer"> <div class="btn_mes"> 升级为正式萌团长">
  • 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 ...
  • <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,这个div能够随着手指的滑动而改变位置,求各位大神指点迷津。。
  • 求问html中如何在定义div中文字的位置在指定位置,用css样式,比如把文字显示在div的中下部分

空空如也

空空如也

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

html5div固定位置