DIV从不能移动变成随便定位(静态+编程)的方法

编了一个游戏测试小网页,竟然发现DIV不能随便移动,查了半天终于解决了静态和编程定位的问题。特别记录一下。

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color: #D94A38; position: absolute; width: 90px; left: 217px; top: 20px; height: 20px; padding: 40px;">Click Me</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank ";
obj.style.left="-300";
//document.getElementById("dd0").style.width="6"
document.getElementById("compman").height="250";

document.getElementById("compman").width="300";

var element=document.getElementById("dd0");
element.style.left="155";
element.style.backgroundColor="#39fA08";
}

</script>

DIV的定位
一、定位的属性:
1.定位模式:position:一共有4种

satitic:默认定位方式

​ 静态定位情况下不能通过边偏移来移动

relative:相对定位

​ 相对当前元素(本身)在文档流中的位置去偏移

​ 相对于自身原来的位置去移动,但是在文档流中的位置不变,依旧占据着

​ 文档流中的位置

absolute:绝对定位 他是脱离文档流的

​ 绝对定位找的参考点是,已有定位模式的父元素的左上角,进行边偏移,

​ 如果当前父元素没有定位模式,就会自动找到带有定位模式的父元素(body)

​ (绝对定位一般用于,父相对自觉对的情况下)

fixed:相对视窗定位

​ fixed定位是脱离文档流的定位

​ 参考点在浏览器窗口的左上角一点
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/192412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

部署springboot项目到GKE(Google Kubernetes Engine)

GKE是 Google Cloud Platform 提供的托管 Kubernetes 服务&#xff0c;允许用户在 Google 的基础设施上部署、管理和扩展容器。本文介绍如何部署一个简单的springboot项目到GKE. 本文使用podman. 如果你用的是docker, 只需要把本文中所有命令中的podman替换成docker即可 非H…

LeetCode [中等]二叉树的右视图(层序

199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 从二叉树的层序遍历改进&#xff0c;根右左 /*** Definition for a binary tree node.* public class TreeNode {* public int val;* public TreeNode left;* public TreeNode right;* public T…

MiniDumpWriteDump函数生成dmp文件

MiniDumpWriteDump函数生成dmp文件 一&#xff1a;概述二&#xff1a; CreateDump.h三&#xff1a;CreateDump.cpp四&#xff1a;main测试五&#xff1a;winDbg分析 一&#xff1a;概述 v2008及以上版本都可以用。 包含CreateDump.h&#xff0c;CreateDump.cpp文件&#xff0c…

Linux: FS: inotify

这个和网卡的event-notify是一样的逻辑,内核看到有什么事情发生,可以通知到用户,然后用户可以根据自己的需求做一些处理。第一次看到,记录一下算是可以日后可以用到的功能。 man inotify。 inotify - monitoring filesystem events 描述: The inotify API provides a mec…

java+springboot物资连锁仓库经营商业管理系统+jsp

主要任务&#xff1a;通过网络搜集与本课题相关的素材资料&#xff0c;认真分析连锁经营商业管理系统的可行性和要实现的功能&#xff0c;做好需求分析&#xff0c;确定该系统的主要功能模块&#xff0c;依据数据库设计的原则对数据库进行设计。最后通过编码实现本系统功能并测…

Python核心编程之此时起步,为时不晚

目录 一、前言 二、程序输出,print语句及“HelloWorld!” 三、程序输入和 raw_input()内建函数

【KPDK】Log Library

DPDK日志库为其他DPDK库和驱动程序提供日志记录功能。默认情况下&#xff0c;在Linux应用程序中&#xff0c;日志既发送到syslog&#xff0c;也发送到控制台。在FreeBSD和Windows应用程序上&#xff0c;日志只发送到控制台。但是&#xff0c;用户可以覆盖日志功能以使用不同的日…

Linux周期任务

我自己博客网站里的文章 Linux周期任务&#xff1a;at和crontab 每个人或多或少都有一些约会或者是工作&#xff0c;有的工作是长期周期性的&#xff0c; 例如&#xff1a; 每个月一次的工作报告每周一次的午餐会报每天需要的打卡…… 有的工作则是一次性临时的&#xff0…

Prometheus+Grafana搭建日志采集

介绍 一、什么是日志数据采集 日志数据采集是指通过各种手段获取应用程序运行时产生的各类日志信息&#xff0c;并将这些信息存储到特定的地方&#xff0c;以便后续分析和使用。通常情况下&#xff0c;这些日志信息包括系统运行状态、错误信息、用户操作记录等等。通过对这些…

牛客算法题 【HJ97 记负均正】 golang实现

题目 HJ97 记负均正 描述 首先输入要输入的整数个数n&#xff0c;然后输入n个整数。输出为n个整数中负数的个数&#xff0c;和所有正整数的平均值&#xff0c;结果保留一位小数。 0即不是正整数&#xff0c;也不是负数&#xff0c;不计入计算。如果没有正数&#xff0c;则平均…

大文件分片上传、分片进度以及整体进度、断点续传(一)

大文件分片上传 效果展示 前端 思路 前端的思路&#xff1a;将大文件切分成多个小文件&#xff0c;然后并发给后端。 页面构建 先在页面上写几个组件用来获取文件。 <body><input type"file" id"file" /><button id"uploadButton…

代码随想录-刷题第十五天

二叉树层序遍历 题目链接&#xff1a;102. 二叉树的层序遍历 思路&#xff1a;利用队列来存储遍历的节点&#xff0c;同时要定义size来保存当前层的节点个数。 时间复杂度O(n) 层序遍历的一般写法&#xff0c;通过一个 while 循环控制从上向下一层层遍历&#xff0c;for 循…

动态规划学习——回文串

目录 一&#xff0c;回文子串 1.题目 2.题目接口 3&#xff0c;解题代码及其思路 解题代码&#xff1a; 二&#xff0c; 分割回文串II 1&#xff0c;题目 2&#xff0c;题目接口 3&#xff0c;解题思路及其代码 一&#xff0c;回文子串 1.题目 给你一个字符串 s &…

模板初阶(2):函数模板的匹配原则,类模板的实例化

一、函数模板的匹配原则 int Add(const int& x, const int& y) {return x y; }template <class T> T Add(const T& x, const T& y) {return x y; }int main() {int a1 1, a2 2;Add(a1, a2);double d1 1.1, d2 2.2;Add(d1, d2);return 0; }一个非模…

Unity 加载本地图片的方法

Unity加载本地图片有不少方法&#xff0c;一般使用以下这些&#xff1a; 1、使用System.IO下的File.ReadAllBytes方法&#xff1a; //方法一void LoadTextureFromFile1(string filePath){// 创建一个Texture2DTexture2D texture new Texture2D(1, 1);// 加载图片数据byte[] i…

【搭建网站】搭建一个自己的网站

【搭建网站】搭建一个自己的网站 传送门&#xff1a;搭建一个自己的网站&#xff1f;看这个就够了&#xff01; P1&#xff0c;建站准备 P2&#xff0c;创建站点

汇编:call与ret/retf指令

一、call指令 ​​​​​​​ 1.1 依据位移进行转移&#xff1a;call 标号 1.2 实现段间转移&#xff1a;call far ptr 标号 1.3 转移地址在寄存器中&#xff1a;call 16位寄存器 1.4 转移地址在内存中 1.4.1 call word ptr 内存单元地址 1.4.2 call dword ptr 内存单元地址…

E/Acc有效加速主义与EA有效利他主义

隐形人工智能初创公司 Extropic 的创始人、前谷歌工程师 Guillaume Verdon 领导了席卷硅谷的“有效加速主义&#xff08;E/Acc&#xff09;”运动。 他在被人肉以后发布声明&#xff1a; 不幸地通过语音取证和网络侦查&#xff0c;被记者人肉搜索了我的身份和秘密初创公司。当…

NVMe Over Fabrics with iRDMA总结 - 2

5.0 Configure NVMe over Fabrics Target (Storage Server) 配置 NVMe over Fabrics 目标机(存储服务器) 5.1 Install NVMe over Fabrics Tools安装 NVMe over Fabrics 工具 5.1.1 Install nvme-cli安装 nvme-cli Download nvme-cli from: 从以下网址下载 nvme-cli:https:…