如何在不考虑滚动的情况下将绝对div位置转换到另一个位置上 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css属性及定位操作

颜色是通过CSS最经常的指定：十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性文字对齐 text-align 属性规定元素中的文本的水平对齐方式...补充padding的常用简写方式：提供一个，用于四边；提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；提供四个参数值，将按上－右－下－...或者给.container加一个固定高度的子div：固定高度解决方案(不推荐使用) 以上方案可以解决但是会使得页面操作不灵活不推荐使用解决方案二清除浮动(推荐使用) clear语法：...absolute（绝对定位）定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!

2.4K5 0

CSS基础知识

（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。...实际上，块状元素都会以行的形式占据位置。第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。...(position: relative)、固定定位(position: fixed) (1) position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...并且拖动滚动条时位置固定不变。

1K3 1

您找到你想要的搜索结果了吗？

是的

没有找到

CSS 中你需要知道 auto 的一切！

width: auto 块级元素(如或)的初始宽度是auto，这使得它们占据了包含它们的块的整个水平空间。...margin 和 auto 关键字对于margin，最常见的用例是将已知宽度的元素水平居中。请考虑以下示例： ?...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...假设子项必须在较小的视口中位于距左侧100像素的位置，对于桌面，它应恢复为默认位置。...如果我们正在设计系统上，则应该考虑多个状态。例如，提示的箭头指向左侧，另一个箭头指向右侧。 ?

5.1K3 0

答题卡生成与打印

坐标绝对位置网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。...但这里要注意一个问题：要考虑offsetParent的border的宽度。...().left); console.info(odiv.getBoundingClientRect().top); 方法2 有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了...计算方式为如下两种情况: 如果文字方向从右往左(默认从左往右,通过设置 direction: rtl;)进行排列,且存在垂直滚动条的情况下 border width + scollbar width 默认情况下...border width 注意: 如果当前元素是行内元素(inline)时, clientLeft将返回 0; 计算滚动条宽度 // 默认情况下(没有滚动条情况下) clientWidth = content

4.1K2 0

长列表优化：用 React 实现虚拟列表

要让表单项渲染在正确位置，我们有几种方案：在容器的第一个元素用一个空元素，设置一个高度，将需要显示在可视区域的 items 往下推到正确位置。我尝试着实现了，发现滚动快一点就会有闪屏现象。...将需要渲染的元素一个 div 包裹起来，对这个 div 应用 transform: translate3d(0px, 1000px, 0px); 对每个列表项使用绝对定位（或 transform）这里我们选择第一个方案来进行实现...内容 div 下是我们的 items，以及开头的一个将 items 往下推到正确位置的空元素，可以看作是一种 padding-top。...可以考虑给图片预设一个宽高，在加载前占据好高度；因为预估高度并不准确，会导致内容高度一直变化。这就是拖动滚动条进行滚动时，滑块和光标位置慢慢对不上的原因。...结尾虚拟列表的实现，核心在于根据滚动位置计算落在可视区域的列表项范围。对于高度固定的情况，实现会比较简单，因为我们有绝对正确的数据。

3.4K1 0

css中绝对定位_绝对定位和相对定位怎么用

滚动条滚动时，距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...，与页面位置不变，跟浏览器位置没关系： bottom属性描述时，以首屏页面左下角为参考点如果浏览器不动，滚动条动的时候，红色盒子跟随页面动，红绿盒子间距不变。... 上一层没有再往上找：绝对定位水平居中设置绝对定位之后...> 之前：之后脱标：定在屏幕上：参考点用top描述，以浏览器的左上角为参考点用bottom描述，以浏览器的左下角为参考点，无论滚动条动还是浏览器底部上下移动...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

2.5K3 0

精读《高性能表格》

单元格使用 DIV 绝对定位即每个单元格都是用绝对定位的 DIV 实现，整个表格都是有独立计算位置的 DIV 拼接而成的：这样做的前提是：所有单元格位置都要提前计算，这里可以利用 web worker...如图所示有 16 个单元格，当我们向右下滑动一格时，中间 3x3 即 9 个格子的区域是完全不会重新渲染的，这样零散的绝对定位分布可以最大程度维持单元格本来的位置。...任何位置都能监听滚动，使得轴上也能滚动了，我们不再依赖 overflow 属性。...模拟滚动时，实际上整个表格都是 overflow: hidden 的，浏览器就不会给出自带滚动条了，我们需要用 DIV 做出虚拟滚动条代替，这个相对容易。...但局部计算肯定是不准确的，如下图所示：但出于性能考虑，我们初始化可能仅能计算前三行的高度，此时，我们需要在滚动时做两件事情：在快速滚动的时候，向 web worker 发送预计要滚动到的位置，增量计算这些位置文字宽度

1.1K4 0

scrollwidth和clientwidth_vue监听页面滚动

offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入元素中的页边距,边框等. 2.clientLeft...clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。...点击div，先弹出b相对于a的位置，再弹出a相对于窗口的位置版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.7K1 0

前端如何实现高性能表格？

单元格使用 DIV 绝对定位即每个单元格都是用绝对定位的 DIV 实现，整个表格都是有独立计算位置的 DIV 拼接而成的：这样做的前提是：所有单元格位置都要提前计算，这里可以利用 web worker...如图所示有 16 个单元格，当我们向右下滑动一格时，中间 3x3 即 9 个格子的区域是完全不会重新渲染的，这样零散的绝对定位分布可以最大程度维持单元格本来的位置。...任何位置都能监听滚动，使得轴上也能滚动了，我们不再依赖 overflow 属性。...模拟滚动时，实际上整个表格都是 overflow: hidden 的，浏览器就不会给出自带滚动条了，我们需要用 DIV 做出虚拟滚动条代替，这个相对容易。...但局部计算肯定是不准确的，如下图所示：但出于性能考虑，我们初始化可能仅能计算前三行的高度，此时，我们需要在滚动时做两件事情：在快速滚动的时候，向 web worker 发送预计要滚动到的位置，增量计算这些位置文字宽度

3.2K1 0

CSS3入门

，但是会影响页面响应速度，不建议使用样式的两个特性层叠性：多个选择器设置的样式可以叠加在同一标签上当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则继承性：子标签继承父标签的某些样式...background-position: X轴 Y轴背景附着背景附着就是背景是滚动的还是固定的 background-attachment:scroll fixed; /* scroll 滚动...scroll : 清除浮动，左侧和下方加滚动条定位将盒子定在页面的某一个位置（漂浮) 定位由两部分组成：定位模式：相对定位、绝对定位、固定定位、静态定位边偏移：top、left、fight、bottom...相对定位相对定位(relative)是元素相对于自己在标准流中原来的位置不会放弃它在标准流中占据的位置 *{ position: relative; } 绝对定位绝对定位(absolute...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置如果父元素没有定位，则找父级的父级，..…. 。

1.6K1 0

前端知识点总结（html+css）（上）

（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...，将两个元素放在不同的BFC容器中即可。...visibilty:hidden //隐藏对应元素，在文档中仍保留位置 opacity：0 //隐藏元素，占位置，可添加事件 9. css中的overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中) 这里是div .center {

2591 0

前端之CSS内容

颜色是通过CSS最经常的指定：十六进制值，如：#FF0000 一个RGB值，如：RGB(255,0,0) 颜色的名称，如：red 还有rgba(255,0,0,0.3)，第四个值为alpha，指定了色彩的透明度...补充padding的常用简写方式：提供一个，用于四边；提供两个，第一个用于上-下，第二个用于左-右；如果提供三个，第一个用于上，第二个用于左-右，第三个用于下；提供四个参数值，将按上-右-下-...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...6.3 absolute（绝对定位）　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...在理论上，被设置为 fixed 的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。示例代码： <!

5.2K10 0

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位完全脱离标准流 , 不占用布局中的位置 , 漂浮在任何元素上方...固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的本质是一种特殊的绝对定位 ;...就是固定定位元素 , 拖动滚动条并不会改变固定定位元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码的基础上 , 将中心的标准流元素设置为固定定位元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;...div> 展示效果 : 默认进入后的样式 : 滚动拖动条后的效果 :

1.7K2 0

面试官：CSS 面试题集锦

有哪些的隐藏内容的方法？使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...自适应是为了解决如何在不同大小的设备上呈现同样的网页（网页的主题和内容不改变）响应式的概念覆盖了自适应，而且涵盖的内容更多。...3.相对大小的字体,字体也不能使用绝对大小（px），只能使用相对大小（em）或者高清方案（rem），rem不局限字体大小，而前面的width也可以使用，代替百分百。...4.流动布局流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。

3.3K3 0

五. css 布局之 position（定位）

right：定位元素和定位位置的右侧距离定位元素水平方向的位置由left和right两个属性控制通常情况下只会使用一个 left越大元素越靠右 right越大元素越靠左２．绝对定位当元素的position属性值设置为absolute时，则开启了元素的绝对定位绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离...3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的包含块( containing block ) 正常情况下...1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质...，固定定位的元素不会随网页的滚动条滚动。

2.1K4 1

CSS

值可选：scroll 默认的随着滚动条滚动， fixed 不滚动 background连写 background：red url（图片路径） no-repeat top center 属性没有顺序要求...但这种情况下，我们在添加标签时都要判断是否有浮动，很麻烦所以我们在有浮动的标签之后加上一个标签，内容为空，含有clear属性也可以解决问题 <div class...默认值，无定位，为标签设置top，left等值都没作用的　　2，relative（相对定位）相对定位是相对于该元素在文档流中的原始位置，在这种情况下，虽然原来的位置没有了内容，但依然占据位置，即占据文档流空间...3，absolute（绝对定位）设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的...4，fixed（固定位置，不管页面怎么滚动，这个元素就固定某个位置） fixed：元素脱离正常文档流 ? ? <!

1.4K1 1

前端Demo|页面布局|适合学习前端一个月的同学

如果能娴熟地将层布局在页面中，页面看起来就会很清爽，浏览也更便捷。基于positon属性的运用，我们可以将页面定位分为静态定位、相对定位、绝对定位、固定定位和浮动五种方式。...静态定位 position默认情况下为static属性，一般在代码中省略该属性。如果不设置position，就是像block1、block3一样，和block2的样式相同哦！...我们将block2放置在标签内，那么它就是block2框的上一级区域二相对移动的位置区域二然后在...区别就在于绝对定位下的页面对象的框，会随着滚动条和页面一起移动，而固定定位下的页面对象的框则不会随之滚动。同样，固定定位也可以使用 top、right、bottom 和 left 属性来控制位移。...：独立于其他页面内容外，将页面位置固定不动（不随滚动条和页面一起移动） positon: fixed; 浮动层：可以将所定义的页面内容放置在页面的左边或者右边 float: left; float:

7561 0

CSS笔记(15)

display隐藏元素后,不再占有原来的位置(和绝对定位一样的特征). 后面应用及其广泛,搭配JS可以做很多的网页特效....属性值描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局....下面做一个土豆网的案例当鼠标经过时,显示遮罩层和播放图标这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display.../images/tudou.jpg" alt=""> 关于鼠标经过时的效果,使用伪类hover时一定要注意,是将鼠标移动到大盒子时才出现遮罩层,

1.1K1 0

CSS入门？一篇就够了！

绝对定位absolute (拼爹型) [注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。...当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。...这句话的意思是子级是绝对定位的话，父级要用相对定位。首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。...visible : 　不剪切内容也不添加滚动条。...auto : 　超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条 CSS高级技巧 CSS用户界面样式

5K2 0

CSS布局(三) 布局模型

流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。...绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位...绝对定位使元素脱离文档流，因此不占据空间，普通文档流中元素的布局就当绝对定位的元素不存在时一样，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。

2.2K7 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭