精华内容
下载资源
问答
我要提问
  • 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>

    收起
    展开全文
    javascript class float function

  • 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:...
    收起

  • vue里实现鼠标点击哪里div定位在哪里

     千次阅读 2019-06-29 12:50:12
    定义个定位的div,需要绑定style <div v-if='showBox'> <div class='show-parent' :style="{left: tranLeft, top: tranTop}"> <div class="shard"> <div class="show-inner"> ...
    收起
    vue

  • div元素定位的五种方法及其区别

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

  • 包含时如何给div定位

     千次阅读 2009-06-24 10:25:00
    用div的绝对定位： 不过要注意：这里的left和top是相对于table这个表格的左边距和顶边距而言的，因此如果table中有多行tr里面都包含了div，那么就要精确计算table的每一行的高度了，例如： height:28px;...
    收起
    javascript table button border

  • div 父子定位，父div relative 子div absolute

     千次阅读 2018-08-28 15:41:27
    &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弹出层 定位问题的 处理
    收起

  • div盒子的相对定位（position:relative）和绝对定位（position:absolute）

     千次阅读 2020-08-25 16:01:35
    有一说一，在做搜索框，鼠标触发事件的时候要用到盒子的相对和绝对定位。 在CSS中，position:absolute;当position的值为absolute时，这个盒子就是开启了绝对定位模式。...div id="main"> <d...
    收起
    html css

  • html中div定位练习

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

  • 关于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布局：相对定位、绝对定位、固定定位

     千次阅读 2016-07-07 21:02:28
    当用div布局，相对定位时，子div的位置是相对于母div来设置的（从母div左上角开始算），margin可以活动到母div外围而不会把母div撑大，padding则总是在母div内部折腾，会把母div撑大。——————————————...
    收起
    css 前端

  • div在相对父元素实现绝对定位

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

  • 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) 部分知识参考自虫师及菜鸟教程
    收起
    selenium

  • CSS页面定位多个div不重合

     千次阅读 2020-07-06 15:58:49
    效果图： 之前是想高度写死，但是屏幕不适应 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素... //定位在左上部分，高度占40% .pie-div{ height: 40%; left:10px; top
    收起
    css html

  • selenium中，div弹出提示框，如何定位？

     千次阅读 2020-05-20 11:15:44
    弹出框是用div模拟出来的，用switch_to_window和switch_to_frame是切换不过去的，那么如何去定位到弹框呢？ 可以这样处理： 一般弹出窗口那个mainFrame是同一层窗口，同时mianframe在顶层窗口下面，所以这里我通...
    收起
    selenium

  • selenium如何定位div、onclick、以及span、以及出现验证码如何处理

     千次阅读 2022-03-25 20:33:25
    1、有些div中什么属性都没有，只有个文本内容 如图我们要定位账号或密码错误文本内容，就得使用xpath方法定位,这里使用了xpath的模糊语句 driver.find_element('xpath',"//div[contains(text(),'错误')]").text ...
    收起
    chrome python

  • selenium如何定位属性一样的div、span元素

     万次阅读 多人点赞 2018-05-14 15:51:10
    在做自动化测试时，我们需要定位元素属性来进行操作，今天在做自动化时发现我要定位的元素找不到，我看了下代码发现，要定位的元素（A）属性与另一个元素（B）属性一样，我用xpath获取绝对路径后，发现找不到，找的...
    收起
    selenium

  • 设置了绝对定位div里的文字不显示

     2019-12-06 16:09:45
    我试过给文字加颜色也看不见，父级也有相对定位，设置了偏移量让span偏移出来还是看不见文字，也设置了优先级，不知道是什么原因呢？ ps：是实现鼠标经过显示div1的效果 找不到span所以加了个背景色 但还是不见...
    收起
    css css3 html5

  • div定位

     千次阅读 2012-01-09 22:05:40
    static是系统默认的div定位方式,relative是在默认定位方式的情况下,进行的偏移,并且默认位置的空间将被占据,如上图所示,该空间无法被其它div占用,通常和top,bottom,left,right等参数配合使用. absolute是将div...
    收起
    float 文档 xhtml html

  • 绝对定位的元素居右的简单方法 div元素居右 / absolute定位

     千次阅读 2020-09-09 09:44:15
    在不用flex、grid等布局的前提下，有些时候我们希望将一个元素不占位定位到某一个地方，比如说居右，由于要求元素不占位，所以float: right也不能完成需求。 解决方法 有一个简易的解决办法，下面是样式sample： ....
    收起
    css html css3

  • 三层DIV定位

     千次阅读 2014-09-12 15:42:45
    CSS的position有三种属性:static, relative, absolute，如果DIV套DIV，达到多层，这些层间的定位关系又是怎样的呢？ 1、只要父容器的postion属性不为static，组件就会以父容器作为定位基准，否则找上一级可定位的...
    收起
    css

  • selenium定位div弹出层时间插件

     2017-04-20 01:20:05
    对xpath获得的绝对路径不能定位 要获取图中时间插件中的“取消”按钮就成 ![图片说明](https://img-ask.csdn.net/upload/201704/20/1492651306_46111.jpg) 调用时间插件的位置 ![图片说明]...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,605
精华内容 80,242
热门标签
关键字：

如何给div定位