精华内容
下载资源
问答
  • DIV定位
    千次阅读
    2019-02-17 17:24:47

    固定定位position :  fixed;

    特点:位置不变,不占位置,只以浏览器进行定位。

    相对定位position :  relative;

    特点:相对于自己原来的位置进行定位,利用top,left,right,botytom 进行移动,定位后仍然占据自己原来的位置。

    绝对定位:position : absolute

    特点:相对于离自己最近并且已经定位的元素进行定位,利用top,left,right,botytom 进行移动,定位后不占位置。

     

    常用定位方法:子绝父相,子div绝对定位,父div相对定位

     

    更多相关内容
  • Vue中div contenteditable 的光标定位方法

    千次阅读 2020-12-19 13:23:22
    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后function keepLastIndex(obj) {console.log(obj)console.log...

    在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框

    在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后

    function keepLastIndex(obj) {

    console.log(obj)

    console.log(window.getSelection)

    console.log(document.selection)

    if (window.getSelection) { //ie11 10 9 ff safari

    obj.focus(); //解决ff不获取焦点无法定位问题

    var range = window.getSelection(); //创建range

    range.selectAllChildren(obj); //range 选择obj下所有子内容

    range.collapseToEnd(); //光标移至最后

    } else if (document.selection) { //ie10 9 8 7 6 5

    var range = document.selection.createRange(); //创建选择对象

    //var range = document.body.createTextRange();

    range.moveToElementText(obj); //range定位到obj

    range.collapse(false); //光标移至最后

    range.select();

    }

    }

    在实际使用时,vue.$emit是一个异步函数,最好在调用这个定位前加上一定的延迟,经测试,5ms就可以了

    setTimeout(()=>{

    keepLastIndex(e.target)

    },5)

    以上这篇Vue中div contenteditable 的光标定位方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • DIV弹出层+定位

    2013-12-24 09:59:21
    这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。
  • js 实现div定位

    万次阅读 2012-03-27 10:23:11
    body { -moz-user-focus: ignore; -moz-user-input: disabled; -moz-user-select: none;....divall{ width:300px; float:left; border:1px solid #cccccc; margin:10px 10px 0px 0px; } .
    <html>
    <head>
    <mce:style>
    <!--
    body {  
    -moz-user-focus:  ignore;  
    -moz-user-input:  disabled;  
    -moz-user-select:  none;  
    }    
    .divall{
    width:300px;
    float:left;
    border:1px solid #cccccc;
    margin:10px 10px 0px 0px;
    }
    .divtitle{
    height:20px;
    border-bottom:1px solid #cccccc;
    background-color:#eeeeee;
    line-height: 20px;
    }
    .divtitle1{
    float:left;
    width:250px;
    cursor: move;
    }
    .divtitle2{
    float:right;
    width:40px;
    }
    .divcontent{
    height:170px;
    width:300px;
    }
    --></mce:style><style mce_bogus="1">body {  
    -moz-user-focus:  ignore;  
    -moz-user-input:  disabled;  
    -moz-user-select:  none;  
    }    
    .divall{
    width:300px;
    float:left;
    border:1px solid #cccccc;
    margin:10px 10px 0px 0px;
    }
    .divtitle{
    height:20px;
    border-bottom:1px solid #cccccc;
    background-color:#eeeeee;
    line-height: 20px;
    }
    .divtitle1{
    float:left;
    width:250px;
    cursor: move;
    }
    .divtitle2{
    float:right;
    width:40px;
    }
    .divcontent{
    height:170px;
    width:300px;
    }</style>
    <mce:script type="text/javascript"><!--
    function move(element, e) {
        var target = element;
        var parent = element.parentNode;
        var zIndex = element.style.zIndex;
        
        // 获取目标div的左上角坐标
        var left = target.offsetLeft;
        var top = target.offsetTop;
        while(target = target.offsetParent){
            left += target.offsetLeft;
            top += target.offsetTop;
        }
        
        // 复制一个div以占据目标div的起始位置
        var newObj = document.createElement("div");
        newObj.innerHTML = element.innerHTML;
        newObj.className = element.className;
        parent.insertBefore(newObj, element);
        // 将目标div改为绝对定位并赋上初使坐标值
        element.style.position = "absolute";
        element.style.left = left;
        element.style.top = top;
        element.style.zIndex = 1000;
        element.style.backgroundColor = "#dddddd";
        
        // 注册事件
        if (document.addEventListener) {
            document.addEventListener("mousemove", startMove, true);
            document.addEventListener("mouseup", stopMove, true);
        } else {
            document.onmousemove = startMove;
            document.onmouseup = stopMove;
        }
        
        e = e || event;
        var deltaX = e.clientX - parseInt(element.style.left);
        var deltaY = e.clientY - parseInt(element.style.top);
        
        // 开始移动
        function startMove(e) {
            e = e || event;
            element.style.left = e.clientX - deltaX + "px";
            element.style.top = e.clientY - deltaY + "px";
        };
        // 停止移动并重新定位
        function stopMove(e) {
            e = e || event;
            var mouseX = e.clientX;
            var mouseY = e.clientY;
            
            // 取消注册的事件
            if (document.removeEventListener) {
                document.removeEventListener("mousemove", startMove, true);
                document.removeEventListener("mouseup", stopMove, true);
            } else {
                document.onmousemove = "";
                document.onmouseup = "";
            }
            
            // 根据鼠标移动情况重新排序div对象
            var divs = parent.childNodes;
            for(var i = 0; i < divs.length; i++){
                if(divs[i].tagName != "DIV")
                    continue;
                    
                var obj = divs[i];
                var left = obj.offsetLeft;
                var top = obj.offsetTop;
                var width = obj.clientWidth;
                var height = obj.clientHeight;
                
                while(obj = obj.offsetParent){
                    left += obj.offsetLeft;
                    top += obj.offsetTop;
                }
                
                // 判断鼠标松开的时候是否在某个div对象的可见区域内,如果为true,则将目标div放置到该div对象的前面
                if(left <= mouseX && mouseX <= left+width && top <= mouseY && mouseY <= top+height){
                    parent.insertBefore(element, divs[i]);
                }
            }
            
            // 将目标div改回相对定位
            element.style.position = "relative";
            element.style.left = "0px";
            element.style.top = "0px";
            element.style.zIndex = zIndex;
            element.style.backgroundColor = "";
            
            // 删除占位div对象
            parent.removeChild(newObj);
        };
        return true;
    }
    function openCloseDiv(element, id){
        var target = document.getElementById(id);
        if(target.style.display == 'none'){
            target.style.display = 'block';
            element.innerHTML = '收起';
        } else {
            target.style.display = 'none';
            element.innerHTML = '展开';
        }
    }
    // --></mce:script>
    <title>相对定位div块移动_自动排列</title>
    </head>
    <body onselectstart='return false;'>
    <div id="mainDiv" style="width:950px;">
        <div id="div1" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题1</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div1content" class="divcontent">内容1</div>
        </div>
        
        <div id="div2" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题2</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div2content" class="divcontent">内容2</div>
        </div>
        
        <div id="div3" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题3</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div3content" class="divcontent">内容3</div>
        </div>
        
        <div id="div4" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题4</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div4content" class="divcontent">内容4</div>
        </div>
        
        <div id="div5" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题5</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div5content" class="divcontent">内容5</div>
        </div>
        
        <div id="div6" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题6</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div6content" class="divcontent">内容6</div>
        </div>
        
        <div id="div7" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题7</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div7content" class="divcontent">内容7</div>
        </div>
        
        <div id="div8" class="divall">
            <div class="divtitle">
                <div class="divtitle1"  onMouseDown="return move(this.parentNode.parentNode,event);"><a href="javascript:void(0)" mce_href="javascript:void(0)">标题8</a></div>
                <div class="divtitle2">
                    <div style="cursor: pointer;" mce_style="cursor: pointer;" οnclick="openCloseDiv(this, this.parentNode.parentNode.parentNode.id + 'content');">收起</div>
                </div>
            </div>
            <div id="div8content" class="divcontent">内容8</div>
        </div>
        
        <div style="width:300px;height:190px;float:left;margin:10px 10px 0px 0px;"> </div>
        <div style="clear: both;" mce_style="clear: both;"></div>
        
    </div>
    </body>
    </html>

    展开全文
  • css将div定位到图片上的固定位置

    千次阅读 2021-06-12 01:16:12
    如图我有个总的大div,宽度和高度都是不定的,里面的手机线框是背景图,用的background-size:contain定位的,黑框是我想要操作的div,想让他能覆盖手机模型的屏幕,而且放大缩小都会刚好限制在手机屏幕内,该怎么...

    bVFPaG?w=481&h=563

    如图我有个总的大div,宽度和高度都是不定的,里面的手机线框是背景图,用的

    background-size:contain

    定位的,黑框是我想要操作的div,想让他能覆盖手机模型的屏幕,而且放大缩小都会刚好限制在手机屏幕内,该怎么定位呢,能不能实现?

    谢邀,这种东西根本不需要啥背景图。

    写了个demo,点开看css代码和直接预览效果。

    https://jsfiddle.net/vpgL5535/

    我理解的话,“放大缩小都会刚好限制在手机屏幕内”指的是宽度适应,如果是要用图片背景的话,可以考虑用百分比布局。 参考代码如下(略去不重要的部分):

    <div class="frame-container">

    <div class="screen-container">

    <!-- content here -->

    </div>

    </div>

    .frame-container{

    max-width: 559px;

    min-height: 753px;

    padding:  13.77% 14.13% 0;

    background: url(frame.jpg) no-repeat;

    background-size: 100% auto;

    box-sizing: border-box;

    }

    .screen-container{

    padding: 10px;  /* 可选,在屏幕范围内仍然增加一点间距比较美观 */

    }

    对应的结果是:

    bVFP16?w=595&h=297

    其中的要点是:

    background-size: 100% auto;

    来使背景图始终缩放至宽度和外层div一致,并保持宽高比。

    padding: 13.77% 14.13% 0;

    取的分别是手机模型屏幕区域到背景图边缘的距离,从

    px

    值转换为百分比值(比例通过像素值除以图片像素宽度得到)

    (可选)

    max-width: 559px;

    使外层div不至于超出背景图大小(背景图尺寸为

    753 x 559

    ),

    min-height

    使内容较少的时候也能看到整个手机模型。

    配色挺漂亮,嚯嚯嚯。

    这个黑色线框可以直接写成“手机的”子元素。放在内部用百分比的宽高来控制一下大小,就能自适应了。

    如:

    .phone div {

    width: 80%;

    height: 80%;

    margin: 0 auto;

    margin-top: 10%;

    }

    950-390_%E7%94%BB%E6%9D%BF-1.jpg

    展开全文
  • div元素(css)定位

    千次阅读 2018-10-18 14:56:26
    1.定位:相对定位(position:relative) &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; h2.pos_left { position:relative; left:-20px } h2.pos_right { position:...
  • 定义个定位div,需要绑定style <div v-if='showBox'> <div class='show-parent' :style="{left: tranLeft, top: tranTop}"> <div class="shard"> <div class="show-inner"> ...
  • div元素定位的五种方法及其区别

    千次阅读 2020-11-21 15:34:52
    方法一:默认定位,也就是静态定位,不需要设置定位属性 方法二:固定定位,相对于视口区进行定位。 position:fiexd 区别: 固定在视口区的某一位置, 原先位置不保留,会被后面的元素占有, 如果没有设置定位属性...
  • 包含时如何给div定位

    千次阅读 2009-06-24 10:25:00
    div的绝对定位: 不过要注意:这里的left和top是相对于table这个表格的左边距和顶边距而言的,因此如果table中有多行tr里面都包含了div,那么就要精确计算table的每一行的高度了,例如: height:28px;...
  • &lt;div class="fu"&gt;  &lt;div class="a"&gt;  1111111111111111111111111111111111111111  &lt;/div...
  • 一个DIV相对于另一个DIV定位

    千次阅读 2017-10-17 15:01:00
    <div style="position:relative"><div style="position:absolute; top:0px;...top和left调整DIV位置,若DIV大小会动态改变可用 % 进行调整定位。 转载于:https://www.cnblogs.com/jeremy58...
  • CSS设置DIV的绝对定位和相对定位

    千次阅读 2019-08-11 13:45:19
    首先不div设置定位,看看他们在网页中的位置 代码如下 <!DOCTYPE html> <html> <head>...CSS中div定位</title> <style type="text/css"> .div1{ heig...
  • div弹出层 定位问题的 处理

    热门讨论 2010-12-01 00:42:45
    div弹出层 定位问题的 处理
  • 有一说一,在做搜索框,鼠标触发事件的时候要用到盒子的相对和绝对定位。 在CSS中,position:absolute;当position的值为absolute时,这个盒子就是开启了绝对定位模式。...div id="main"> <d...
  • html中div定位练习

    千次阅读 2015-12-16 19:38:04
    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float、position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定,$http请求等等,记录备忘: login.css中代码: /* 主...
  • 关于DIV相对于父DIV绝对定位

    千次阅读 2017-11-24 19:12:32
    点击打开链接  还有发现个问题div 需要设为内联元素才有效果,即 display: inline-block;
  • Div滚动条定位设置

    万次阅读 2018-08-17 14:58:40
    1.div &lt;div id="DataDiv" style="overflow-x: hidden;overflow-y: scroll;max-height:500px;"&gt; //数据 &lt;/div&gt; 2.通过JS去设置Div滚动条的位置 document....
  • div 绝对定位覆盖

    千次阅读 2017-03-08 17:54:41
    两个绝对定位div, 其中一个覆盖另一个 代码:
  • 当用div布局,相对定位时,子div的位置是相对于母div来设置的(从母div左上角开始算),margin可以活动到母div外围而不会把母div撑大,padding则总是在母div内部折腾,会把母div撑大。——————————————...
  • div在相对父元素实现绝对定位

    千次阅读 2020-06-11 17:35:46
    在学习前台做练手项目是遇到:div 使用 position:absolute;和left:0px不能实现相对父元素实现绝对定位。在百度时灵光一闪,使用margin-left实现需求。 2.css中的position属性 平时用的的属性值有以下几个: ...
  • Selenium之如何定位隐藏div弹窗

    万次阅读 2018-12-11 16:41:45
    一、判断是否为隐藏属性 display的值为none则为隐藏...js = 'document.querySelectorAll("#agentId > div > div > i")[0].style.display="block";' driver.execute_script(js) 部分知识参考自虫师及菜鸟教程
  • CSS页面定位多个div不重合

    千次阅读 2020-07-06 15:58:49
    效果图: 之前是想高度写死,但是屏幕不适应 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素... //定位在左上部分,高度占40% .pie-div{ height: 40%; left:10px; top
  • 弹出框是用div模拟出来的,用switch_to_window和switch_to_frame是切换不过去的,那么如何去定位到弹框呢? 可以这样处理: 一般弹出窗口那个mainFrame是同一层窗口,同时mianframe在顶层窗口下面,所以这里我通...
  • 1、有些div中什么属性都没有,只有个文本内容 如图我们要定位账号或密码错误文本内容,就得使用xpath方法定位,这里使用了xpath的模糊语句 driver.find_element('xpath',"//div[contains(text(),'错误')]").text ...
  • selenium如何定位属性一样的div、span元素

    万次阅读 多人点赞 2018-05-14 15:51:10
    在做自动化测试时,我们需要定位元素属性来进行操作,今天在做自动化时发现我要定位的元素找不到,我看了下代码发现,要定位的元素(A)属性与另一个元素(B)属性一样,我用xpath获取绝对路径后,发现找不到,找的...
  • 我试过文字加颜色也看不见,父级也有相对定位,设置了偏移量让span偏移出来还是看不见文字,也设置了优先级,不知道是什么原因呢? ps:是实现鼠标经过显示div1的效果 找不到span所以加了个背景色 但还是不见...
  • div定位

    千次阅读 2012-01-09 22:05:40
    static是系统默认的div定位方式,relative是在默认定位方式的情况下,进行的偏移,并且默认位置的空间将被占据,如上图所示,该空间无法被其它div占用,通常和top,bottom,left,right等参数配合使用. absolute是将div...
  • 在不用flex、grid等布局的前提下,有些时候我们希望将一个元素不占位定位到某一个地方,比如说居右,由于要求元素不占位,所以float: right也不能完成需求。 解决方法 有一个简易的解决办法,下面是样式sample: ....
  • 三层DIV定位

    千次阅读 2014-09-12 15:42:45
    CSS的position有三种属性:static, relative, absolute,如果DIVDIV,达到多层,这些层间的定位关系又是怎样的呢? 1、只要父容器的postion属性不为static,组件就会以父容器作为定位基准,否则找上一级可定位的...
  • 对xpath获得的绝对路径不能定位 要获取图中时间插件中的“取消”按钮就成 ![图片说明](https://img-ask.csdn.net/upload/201704/20/1492651306_46111.jpg) 调用时间插件的位置 ![图片说明]...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,605
精华内容 80,242
关键字:

如何给div定位