文章目录 相对定位 position: relative; 特性 用途 绝对定位 position: absolute; 绝对定位参考点 单独盒子绝对定位参考点： 父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点...父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点。 父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。父绝子绝，因为绝对定位脱离标准流，影响页面的布局。父相子绝是常用的布局方案。...（如果父辈有边框，则以内沿边界为起点） 绝对定位的盒子无视父辈的padding。 <!...设置绝对定位之后，margin:0 auto;不起任何作用 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半 ...，一定一定要加top属性和left属性， 固定定位脱标，填充图片会被遮挡，设置body的padding之后导航栏会随之下移 固定定位以浏览器为参考，设置top和left之后定在浏览器顶部
一、绝对定位特点 ---- 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器...; 绝对定位 元素 不保留 原来的位置 , 是完全脱离 标准流 的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位 是相对于 盒子在普通流模式下的位置 进行设置的 ; 相对定位 是 不脱标 的...DOCTYPE html> 绝对定位示例 .father...的元素 , 红色盒子是标准流元素 , 标准流元素会在 相对定位元素原坐标的基础上进行排列 ; 三、绝对定位脱标示例 ---- 绝对定位 会 脱离标准流 , 后续的标准流元素会忽略掉绝对定位的元素 ,...DOCTYPE html> 绝对定位示例 .father
css绝对定位与相对定位结合使用 1、绝对定位与相对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。...这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。...—（w3cSchool） 2、搭配使用 有时候element的card固定的位置很讨人厌，想在标题处加一个按钮但是却不能在同一水平线上，很让人恼火，所以后面用绝对定位与相对定位让按钮到想要的位置 <div
元素被绝对定位，那么元素将会脱离正常流（normal flow），并依据包含块来定位。包含块的概念及其判定可以看这里。...但是对于绝对定位元素，left，right，top属性设置为auto时，会发生比较有趣的现象。当left:auto时，元素的左边将和元素的静态位置的左侧对其。...所以根据上述公式，我们也可设计一种绝对定位元素居中的方式， {position:absolute; left:0; right:0; width:50px; margin:10px auto...但是IE6,7,8（Q）不支持绝对定位元素的这种垂直居中方式。 另外，在宽度过度受限的情况下，将会选择性的充值某个属性。...利用上述绝对定位的性质，可以实现一个元素在包含块中的水平垂直居中对齐： { position: absolute; top: 0%; right: 0%; bottom
一、子元素绝对定位 父元素相对定位 ---- 绝对定位 要和 带有定位 的 父容器 搭配使用 ; 子元素 使用绝对定位 , 父元素要使用 相对定位 ; 子元素使用 绝对定位 , 在布局中不会保留其位置..., 子元素完全依赖 父容器 的位置 , 此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性...; 父级元素 需要 占位 , 必须使用 相对定位 ; 子元素 需要 任意摆放 , 必须使用绝对定位 ; 二、代码示例 ---- 父元素使用相对定位 , 子元素使用绝对定位 ; 两个子元素分别放置在 左侧和右侧...DOCTYPE html> 绝对定位示例 /* 父元素设置相对布局...: 40px; height: 40px; background-color: blue; } /* 子元素设置绝对布局 */ .son2 { /* 绝对布局 */
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。...在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？ 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...好了，从浏览器的呈现来看，设置相对定位就可以让绿色div以外层div进行相对偏移。下面再来看看绝对定位。 ? 父元素div设置了绝对定位之后，的确绿色div就以外层div进行偏移了。...上面已经测试使用了绝对定位，绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。 那么这个怎么去验证呢？...先看看原来基于父级定位的绝对定位的div情况如下： ? 将绿色div的绝对定位改为固定定位，如下： ?
相对包含块偏移定位 在绝对定位模型中，一个框明确地基于它的包含块偏移。不是父元素，这点需注意。 要是人家问你，绝对定位相对于谁定位啊？你很快乐的说：它的父元素。那就显得矬了- -!...这一点又与浮动元素不同，好歹浮动元素会对后继的行框产生影响，而且，后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。...但是绝对定位的元素不会，可以把每个绝对定位的框看做一个单独的图层，独来独往。所以，说它完全脱离了常规流也不无道理。...注意一点，绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。...绝对定位元素生成的包含块 一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过，绝对定位元素的内容不会在其它框的周围排列。
仅供学习，转载请注明出处 讨论的问题 在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中，发现当使用定位布局的时候，存在一个无法使用margin居中的方法。...下面设置一下相对定位，看看会不会影响这种居中效果 ? 从上图可以看出相对定位并不会影响margin居中布局。 设置一下绝对定位，看看会不会影响这种居中效果 ?...可以从图中看出，绝对定位会影响margin的居中布局。 设置一下固定定位，看看会不会影响margin居中效果 ?...好了，从上面来看，绝对定位已经可以设置div居中了，那么固定定位是否也是如此呢？ 固定定位设置div居中 ? ?...固定定位从上图来看，也是可以通过这种方式来进行居中的，基本方法如下： left: 50% margin-left: 负自身宽度的一半 因为绝对定位和固定定位相对于文档流就是悬浮的，这种效果最适合用于制作页眉部分的固定栏目了
微信小程序 - 相对定位和绝对定位 相对定位relative，绝对定位absolute 相对定位：元素是相对自身进行定位，参照物是自己. 绝对定位：元素是相对离它最近的一个父级元素进行定位....相对定位：relative position:relative; /*相对定位*/ left:50rpx; /*相对于自己往右偏离50*/ top:50rpx; /*相对于自己往下偏离...50*/ 绝对定位：absolute position: absolute; left: 50rpx; top: 50rpx; 效果: ?...Attendance-early.png' style="display: {{none}};"> {{zao}} position【定位属性...：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】 相对路径和绝对路径 绝对路径: 以“/”开头代表根目录 相对路径:
一、问题提出 ---- 绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ; 相对定位 的 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin...: auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点...的容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...- 垂直居中 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /...父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width
在工作中遇到一种情况，例如把一个div元素绝对定位到一个位置，但是该元素中的文字个数不确定，还要保证始终该文字是居中显示，则可以定义两个div,外层div绝对定位并加一个宽度，内层div居中 .box03
简介 在绝对定位模型中，盒根据其包含块显式偏移。盒从标准流中完全脱离（对后来的同胞元素没有影响）。绝对定位盒为其标准流的子元素和绝对定位（非固定定位）后代创建新的包含块。...然而，绝对定位元素的内容不在任何其他盒的流中，它们可能遮挡其他盒的内容（或被遮挡），这取决于重叠盒子的堆叠层级stack levels 。 2....固定定位 Fixed positioning 固定定位是绝对定位的子类。唯一的区别在于，固定定位盒的包含块是由视口创建的。在连续媒体中，当文档滚动时，固定盒不会移动。...就这点来讲，它们同固定背景图片fixed background images相像。在分页媒体paged media中，固定定位盒在每一页重复。这对布局很有用，比如，在每个页面的底部放置签名。...比页面区域要大的固定定位盒将会被裁剪。固定定位盒在初始化包含块中不可见的部分将不会打印。 开发者可以使用固定定位去创建框架式frame-like布局。考虑如下框架布局： ?
css绝对定位的重新认知 所谓的css绝对定位，就是 position:absolute; 这里记录一个我的错误认知，就是 绝对定位的参照物是 内容，还是 内容+内边距，我一直以为 参照物就是内容，但是实际上参照物是... css绝对定位的重新认知...this is a box 你可以想到效果是这样的 但是如果给 box添加了 padding，那么绝对定位是怎样的...50px;，来看看效果 可能你会疑惑，那边框呢，可以试试，在 .box类中添加边框 border: 50px solid hotpink; 来看看效果 可以看见并没有包含边框，因此 css绝对定位的参照物就是
有一个position值为absolute的div，他的祖先元素里没有任何定位属性，或者他的父元素就是body。 当这个div的bottom值为0的时候，他应该被定位到哪个位置？...就像下面的代码，这个div依然被定位在了屏幕的底部，和fixed值“一样”的表现。只不过这个“一样”是暂时的，拖动滚动条就露底了，div滚动了上去，死死的定位在了第一屏底部的位置。 绝对定位bottom值为0的位置问题-caihong.cc *{...应该不少同学都知道这个表现，我问过几个朋友，他们也知道绝对定位的元素bottom为0的时候会定位到屏幕底部。但是细问原理的时候都没能讲出来。 为什么他没有定位到文档的最底部？...传送门 这一条刚入门的时候就知道，绝对定位的元素相对于他的包含块位移。现在的问题是div的包含块是谁，于是我继续去扒包含块。
先来看看效果图： 图片 需要一些位置计算.. 参考https://www.cnblogs.com/wang715100018066/p/13607330.html 的图片详情效果。。...显然没有完全一样 但是凑合吧 后面在优化 比较关键的api还是之前计算图片位置的文章 相关的api - getBoundingClientRect 直接上代码吧： <!...效果图: 图片 上代码： <!
父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width..., 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素 ; /* 绝对定位元素...- 左上角 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器左上角 */ /* 上边偏移...- 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子在父容器右下角 */ /*...父容器盒子 */ .box { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: relative; /* 内容尺寸 通过测量图片获得 */ width
一、绝对定位 ---- 绝对定位 是以 父级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果 父容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中...head> 展示效果 : 三、子元素设置绝对定位与父容器是否有定位的效果对比...---- 在上面代码的基础上 , 为 子元素 添加绝对定位 数据 , 分别设置 顶部 和 左侧 50 像素的偏移量 ; /* 绝对定位 */ position: absolute;.../* 顶部偏移量 50 像素 */ top: 50px; /* 左侧偏移量 50 像素 */ left: 50px; 为 子元素 添加 绝对定位 , 如果 父容器有定位 , 则相对于父容器的坐标进行定位
DOCTYPE html> background-position定位图片</
首先我们从最简单的绝对定位开始，因为它最容易理解。 绝对定位 依然遵从我们的原则，不讲原理，不贴文档，直接从代码栗子开始。...接上期的代码例子，我们在内联样式中写一段定位代码： 大家请看代码，里面的属性和值几乎可以直译成中文了： 位置: 绝对; 顶部: 100像素; 左侧: 100像素; 我们先来看看效果： 上面的代码中就是所说的...“绝对定位”，默认情况下，它是相对于文档根元素（html 或 body）来定位的。...它们的“辈分”是靠包含关系确定的，多包含一层就变爹，再包一层就变爷爷～ 那么既然 a 是 h1 的后代元素，且 h1 已经应用了绝对定位，那么 h1 就是所谓的“定位祖先”了。...如果 a 再应用绝对定位的话，就是相对于 h1 目前的左上角来定位的： 再来看一下效果： 这里给 a 设置的 50px，位置已经是从 h1 左上角开始计算的了。
前言 说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 compression.js ，亦或是在线处理类的 OSS 上传，...文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套 JS 实现的图片压缩代码呢？...压缩思路 涉及到 JS 的图片压缩，我的想法是需要用到 Canvas 的绘图能力，通过调整图片的分辨率或者绘图质量来达到图片压缩的效果，实现思路如下： 获取上传 Input 中的图片对象 File 将图片转换成...// 图片去截取指定位置载入 // context.drawImage(image,100, 100, 100, 100, 0, 0, imageWidth,...上传存储图片如果需要对文件大小格式有要求的，可以统一压缩处理图片 前台页面想要编辑图片，可以在 Canvas 处理图片的时候，加一些其他逻辑，例如添加文字，剪裁，拼图等等操作 当然温馨提示：因部分接口有
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
