在CSS中使用position: absolute时如何避免两个div之间的重叠_如何仅使用css将此div置于reactjs中的两个div列之间 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

04

掌握CSS中的z-index

z-index是一个用于控制文档中图层顺序的属性。具有较高z-index值的元素将会出现在具有较低值的元素之上。就像页面上的x轴和y轴决定一个元素在水平和垂直方向上的位置一样，z-index控制它们在z轴上相互层叠的方式。

03

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

是的

没有找到

CSS中重要的BFC概念

CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其

01

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

01

【前端就业课第二阶段】CSS 零基础到实战（04）定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

02

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

写这篇文章的起因是源于这篇文章：谈谈面试与面试题中关于position的讨论，文中一开始就说的这句话：面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了…… 说到position，那么稍微对c

05

前端面试实录CSS篇（最近一周）

imgfixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

01

CSS 层叠上下文（Stacking Context）

在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚，而 Z 轴则相对较为模糊，或者说不能全面的理解Z轴的显示逻辑。

01

第213天：12个HTML和CSS必须知道的重点难点问题

这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。

02

web前端面试中10个关于css高频面试题,你都会吗?

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

02

HTML和CSS常见问题整理

对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。

03

移动端圆环进度动画方案（透明背景-透明度圆环-css3版）

适逢元旦假期，妹子逛街吃火锅看电影陪女朋友之际，写出来的文章难免画风略微粗糙，但是这个动画的实现还是费了一番脑子的，话说程序猿之间交流并不需要过多解释，上代码就搞定。

03

面试必备 css面试必考点

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。

01

脱离文档流分析（转）

block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

02

移动端圆环进度动画方案（透明背景-透明度圆环-css3版）

08

详解清除浮动的多种方式（clearfix）

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481

06

50道 CSS 经典面试题（包含答案）

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

03

50道CSS基础面试题

23 0 0 50道CSS基础面试题 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性

05

前端入门4-CSS属性样式表声明正文-CSS属性样式表

作为一个前端小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的理解，梳理出的知识点，或许有遗漏，或许有些理解是错误的，如有发现，欢迎指点下。

03

一篇文章带你了解css z-index(重叠顺序)

div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。

03

CSS 实现“故障”特效

这些效果要是综合运用到业务中应该很吸引眼球。今日早读文章由腾讯@chokcoco投稿分享。

01

50道CSS面试题（附答案）

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

03

BFC背后的神奇原理

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

01

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度。（一般情况下参考元素 == 父级元素，这里写成参考元素而不是父级元素，在下面我会再细说）

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。

01

一篇文章带你了解CSS对齐方式

当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。

01

CSS

CSS是Cascading Style Sheets的加简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

03

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

CSS魔法堂：Absolute Positioning就这个样

前言当我们以position:absolute之名让元素脱离Normal flow的控制后，以为通过left和top属性值即可让元素得以无限的自由时，却发现还有各种神秘的力量左右着它的来去，于是我们意识到自己力量的微弱，开始迷茫不前。后来有幸拾到各路前辈高人的秘笈，终于打通任督二脉，记录在案以便日后查阅。以Normal flow为基础 Q:不是说好以左上角为原点(0,0)吗？怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal flow中的是

07

块格式化上下文（BFC）布局规则及常见情景

Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

04

前端实战Demo：一张图片搞定一页布局

整个页面只有一个或者两个不多的需要操作的组件，比如按钮、输入框之类的，图片中的其他元素都只是作为静态展示的设计而存在，那么专门把这个几个元素抠出来再写进页面中去显然就有点复杂化了，并且可能还会出现一些元素与元素之间相对位置重叠或者间距过大等问题。那么就可以用一个空的div标签来框选出上述图片中的输入和按钮区域，然后在这个空的div中添加input或者button元素，当然要保持样式和设计图中的一致。那么上图中的例子，我给出的页面的主体代码就是这样： Html代码：

<input id="tel" type="text" placeholder="">

Css代码： .container{ position: absolute; background:url("imgs/1.jpg"); background-size: 100% 100%; background-repeat: no-repeat; } .btn{ position: absolute; margin-top: 40%; margin-left: 20%; 　　 width: 55%; 　　 height: 20%; display: none; } 　　因为这里是用一个空的div来框选图片中的input或者按钮区域，所以为了保持原有图片的样式，就需要把实际上的input或者button的区域的display设置为none。当然要使用Javascript设置，当input和按钮区域获得焦点时，显示input和button了。可以直接写内联的input的onfocus属性： onfocus="this.style.display='block'" 　　当然上面两幅图都是设计相对比较简单的图片，倘若是复杂一些的图片呢？

03

CSS面试题总结[通俗易懂]

一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。

01

前端基础篇之CSS世界

我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。

05

table固定表头，tbody滚动条样式设置以及填的几个坑

有的建议使用：position: absolute 或者 position: fixed;

02

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。

02

前端系列第3集-如何理解css盒子型?

CSS盒子模型是一种设计网页布局的概念，它将每个HTML元素表示为一个盒子，该盒子由内容、内边距、边框和外边距组成，这些部分共同构成了一个完整的盒子模型。

01

104道 CSS 面试题，助你查漏补缺（上）

https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

01

CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其他的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。

04

说一说z-index容易被忽略的那些特性

关于z-index，每个人都会用，但大多人都不理解其真正的生效机制。最近做项目有很多用到z-index的地方，才发现以前用的一知半解，所以上网查了一些资料梳理了一下。下文参考自!What No One Told You About Z-Index，文中介绍了很多关于z-index使用的关键点。

02

说一说z-index容易被忽略的那些特性

本文介绍了堆叠上下文和堆叠顺序，并详细讲解了元素在堆叠上下文中的堆叠顺序。同时，文章还探讨了如何通过z-index和position属性来控制元素的堆叠顺序，并举例说明了如何使用这些属性来调整元素的堆叠顺序。

05

前端面试题归类-css

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

04

【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

2018搜狐前端笔试题盒模型本质上是用以封装HTML元素的概念盒子，它包含了边距，边框，填充以及实际内容。即由外向里是 margin, border, padding, content

06

IT课程 CSS基础 028_浮动、定位、对齐

在 CSS 中，浮动是一种布局技术，通过 float 属性来使元素在页面中沿着容器的左侧或右侧浮动，使得其他元素能够环绕它。

01

59道CSS面试题(附答案)

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。

05

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。

05

【前端词典】提高幸福感的 9 个 CSS 技巧

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。

02

奇妙的 CSS MASK

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

02

圣诞快乐，手绘CSS圣诞老人，DIY浪漫圣诞礼物！

随着圣诞节的临近，街头巷尾都弥漫着浓浓的节日氛围。这不仅仅是一个普通的节日，更是一年中最适合表达爱意的时刻。今晚的平安夜，你是否想为你的女朋友准备一份特别的礼物？如果你是一位编程爱好者，那么我有一个非常独特且富有创意的想法——用CSS手绘一个可爱的圣诞老人！

01

CSS-定位(position)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

01

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。

08

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭