为什么我的div隐藏在位置:绝对图像后面？_如何正确地在带有绝对位置的div后面添加内容_为什么我绝对定位的div中的背景图像不显示？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS笔记(15)

本质:让一个元素在页面中隐藏或显示出来. 1.display属性 display属性用于设置一个元素应如何显示....display隐藏元素后,不再占有原来的位置(和绝对定位一样的特征). 后面应用及其广泛,搭配JS可以做很多的网页特效....visibility隐藏元素后,继续占有原来的位置(和相对定位一样的特征) 如果隐藏元素想要原来位置,就用visibility : hidden....下面做一个土豆网的案例当鼠标经过时,显示遮罩层和播放图标这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display...(我也不知道这里为什么用这个,我用的visibility发现也是一样的效果.)

1.1K1 0

前端零基础教学开始第六天 06 – day 多种定位方法和精灵图使用元素的显示与隐藏…

大家好，又见面了，我是你们的朋友全栈君。 1、定位与浮动的区别：浮动只能浮动到左面与右面 2、定位想定在页面上想定到哪里可以定到任意位置。...+ 边偏移属性来设置元素的位置相对定位以自己在标准流位置的左上角为基点 + 边偏移属性，定位元素新的位置 */ position: relative; left: 300px;...绝对定位有两个重要的概念 1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性来设置元素的位置 <!...、属性值：正整数，负整数或者0 默认值是0 数值越大，盒子越靠上 2、如果属性值相同，则按照书写顺序，后来者居上 3、数字后面不能加单位 4、注意： z-index只能应用于相对定位，绝对定位和固定定位的元素...> 复制代码元素的显示与隐藏在css 中三个显示和隐藏的单词比较常见，我们要区分开他们分别是display visibility 和 overflow display

3.5K2 0

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

是的

没有找到

CSS入门？一篇就够了！

貂蝉 id选择器 id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下： #id名{属性1:属性值1; 属性2:属性值2;...| url (url) 参数： none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景...元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。...display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。...visible : 　对象可视 hidden : 　对象隐藏特点：隐藏之后，继续保留原有位置。（停职留薪） overflow 溢出检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

5K2 0

CSS3 - 清除浮动

通过上图可以看到，设置图片左浮动可以将图片从正常文档流中抽取出来，后面的元素会忽略浮动元素原来的位置，所以可以看到以块元素显示的span标签插入到了图片下面，但是，我们发现文字却不会嵌入到图片下面，因为这就是浮动最纯粹的意义...3个板块外面的父元素ul 我是跟在ul后面的新div 复制代码 // css代码 ul { padding: 20px;...ul后面的新div 复制代码 ?...效果：对于ul后面的元素来说，它们可以在浮动元素下边依次排列了。...缺点：采用这种overflow方法时可能会对采用定位position的元素产生影响，因为在ul的范围内，超出的部分将会被隐藏，所以如果定位元素处在ul超出的范围内，那么会被隐藏。

7452 0

CSS隐藏元素的几种方式

回流一定会触发重绘，重绘不一定会触发回流 display: none 最常见的隐藏元素的方法，不会渲染该元素，所以该元素不会占位置，也不会响应绑定的事件。...visibility: hidden 元素在页面中会保留位置，但是不会响应绑定的事件 div:nth-child(2) { visibility: hidden; background-color...opacity: 0 将元素的透明度设置为0。所以元素在页面中会保留位置，且也能响应元素绑定的监听事件。...定位法绝对定位法因为绝对定位可以让元素脱离标准流，所以只需要设置绝对定位，就可以让元素移出可视范围内，这样子就相当于隐藏了。...简单地说下为什么transform属性为什么不会触发回流、重绘。

2K2 0

CSS3 - 清除浮动

通过上图可以看到，设置图片左浮动可以将图片从正常文档流中抽取出来，后面的元素会忽略浮动元素原来的位置，所以可以看到以块元素显示的span标签插入到了图片下面，但是，我们发现文字却不会嵌入到图片下面，因为这就是浮动最纯粹的意义...PS: 如果想让文字也插入到浮动元素下面，可以通过设置绝对定位来实现。 // html代码 !...3个板块外面的父元素ul 我是跟在ul后面的新div // css代码 ul { padding: 20px; background-color...ul后面的新div 效果： ul后边的div元素确实可以在浮动元素下边排列，并且设置margin、padding等也是针对浮动元素的下边框。...缺点：采用这种overflow方法时可能会对采用定位position的元素产生影响，因为在ul的范围内，超出的部分将会被隐藏，所以如果定位元素处在ul超出的范围内，那么会被隐藏。

1011 0

前端成神之路-CSS高级技巧

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...1.4 显示与隐藏总结属性区别用途 display 隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 visibility 隐藏对象，保留位置...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术 ? 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。 ?...负边距+定位：水平垂直居中咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。 2). 压住盒子相邻边框 ?

6.8K3 0

CSS——06扩展：高级

元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！...1.4 显示与隐藏总结属性区别用途 display 隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 visibility 隐藏对象，保留位置...CSS精灵技术（sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...为什么需要使用精灵图技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

4.7K4 0

面试官：CSS 面试题集锦

有哪些的隐藏内容的方法？使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。...使用visibility:hidden来隐藏内容 visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白...absolute 绝对定位绝对定位（position：absolute），相对于父级而言进行位置偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找参照物，直至最终的浏览器窗口。...4.流动布局流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。...改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）(复合是什么，我也不懂，没听说过，有知道的朋友可以在留言区告诉我

3.3K3 0

css笔记

| url (url) 参数： none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景...但是，在我们网页布局的时候，最常说的子绝父相是怎么来的呢？请看如下图：所以，我们可以得出如下结论：因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。...** CSS高级技巧元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。...display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。...位置是放到 head 标签中间。后面的type="image/x-icon" 属性可以省略。（我相信你也愿意省略。）为了兼容性，请将favicon.ico 这个图标放到根目录下。

7.7K5 0

「学习笔记」CSS基础

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。...相对定位(relative)」相对定位是元素相对于它原来在标准流中的位置来说的。相对于自己原来在标准流中位置来移动的原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。「5....绝对定位(absolute)」绝对定位是元素以带有定位的父级元素来移动位置完全脱表–完全不占位置；父元素没有定位，则以浏览器为准定位(Document文档)。...定位(position)的扩展绝对定位的盒子居中绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中在使用绝对定位时要向实现水平居中，可以按照下面的方法： left : 50%...1.4 显示与隐藏总结属性区别用途 display 隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛 visibility 隐藏对象，保留位置

3.2K3 0

弹指间，网页灰飞烟灭——Google灭霸彩蛋实现

不知道大家有没有看这段时间最火的一部电影《复仇者联盟4：终局之战》，作为漫威迷的我还没看，为什么呢？...对于看电影，我并不是那么崇尚看首映，或者非要第一时间看到，但是对于喜欢的电影我一定会找个最佳的位置观看，现在票价合理，最佳观影区充足，正是看电影的好时机。...想必大家已经知道了，在Google中搜索“灭霸”，然后在右侧点击的“无限手套”，页面的一些搜索项就会随机性像沙子一样的消失（后面统称沙化效果），特别的炫酷。有不知道的可以看下面的动图： ?...> 样式就不贴了，后面会给出源码。...，然后将原始元素隐藏。

5794 0

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

这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中?...注意 relative 移动后的元素在原来的位置仍占据空间。 **absolute:绝对定位。...注意设置 absolute 属性的元素在标准流中不占位置。 **fixed:固定定位。**位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。...绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。...无法触发其点击事件适用于那些元素隐藏后不希望页面布局会发生变化的场景 opacity:0 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

2.2K2 0

CSS笔记

:hidden 隐藏的元素仍需占用与未隐藏之前一样的空间定位 postion: absolute(绝对定位)，其位置相对于最近已定位的父元素，如果元素没有已定位的父元素那么它的位置相对于 static...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...sticky(粘性定位)，基于用户滚动位置来定位，在未滚动出目标区域时，它的行为就像position:relative;它的表现就像 position:fixed;，它会固定在目标位置。...元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） Overflow visible 默认值。...class="desc">这里添加图片文本描述图像透明 opacity来设定图片透明度，opacity 属性能够设置的值从

1.9K2 0

css应知应会第四集

但有可能会被卡住 4、文本，图像，行内元素和行内块元素时采用环绕的方式来排列的，是不会被其它的浮动元素压在底下的 2、清除浮动元素一旦浮动起来之后，就会对后续元素的位置带来一定的影响...，也一同被隐藏了 4、在父元素的最后位置处，增加一个空子元素，并设置其 clear:both 即可 5、... ... 2、显示 1、显示方式 1...实现位置的微调 3、定位 - 绝对定位 1、什么是绝对定位 & 特点将元素设置为绝对定位的话将具备以下特征 1、绝对定位的元素会脱离文档流...-不占据页面空间 2、绝对定位的元素会相对于离他最近的，已定位的，祖先元素去实现位置的初始化 3、如果元素没有最近的祖先元素的话，那么就相对于最初的包含框...(body)去实现位置的初始化 <div

1.2K3 0

每天10个前端小知识【Day 18】

核心的css代码结构如下： position: relative：为伪元素绝对定位 overflow: hidden：文本溢出限定的宽度就隐藏内容） position: absolute：给省略号绝对定位...class='demo'>这是一段很长的文本实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字这种实现具有以下优点...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...构成渲染树计算元素位置进行页面布局绘制页面，最终在浏览器中呈现是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM

1091 0

容易被误解的overflow:hidden

我简单截几个图给懒得打开demo的童鞋看一下： image.png image.png 在demo中，你可以看到绝对定位的元素被定位到了...而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。理论依据那么，这个原理到底是什么呢？...这就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。这就好比驻日美军，他们不受日本的法律约束而受美国军法约束。...回到我的demo，overflow的元素位于相对定位的元素与绝对定位元素之间，因此根据规定它不能剪裁绝对定位的子元素。也就是说爷爷相对定位，老爸规定溢出隐藏，可是儿子是绝对定位元素。...这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了，你才知道是为什么。

3.3K11 0

css基础

由此可见：任何显示申明的规则都可以覆盖其继承样式。　　此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。....clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: "...整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

1.5K2 0

css入门（5）

三、背景图像概述在本章第1节“背景样式概述”，我们已经给大家分析了在CSS中控制元素的背景样式包括背景颜色和背景图像，其中控制元素的背景图像涉及到的属性比较多，下面稍微给大家讲解一下，以便为读者理清后面的学习思路...3、background-position background-position属性定义了背景图像在该元素的位置。...image.png 定义背景图像在元素的位置，一般需要定义背景图像的横向位置和纵向位置，例如上图定义了背景图像在横向距离元素左边80px，在纵向距离元素顶边40px。...语法： background-image:url("图像地址"); 说明：图像地址可以是相对地址，也可以是绝对地址。请看“相对地址和绝对地址”。举例： <!...第三个div元素background-repeat属性值为“repeat-y”，因此背景图片会在垂直方向（y轴）平铺大家可能对hr元素的属性设置很奇怪，为什么设置hr的border-color属性值为

9743 0

HTML和CSS常见问题整理

position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。如何画一个三角形左右边框设置为透明，长度为底部边框的一半。...center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...margin: auto } 方案二：float 自身浮动法 center的div需要放到后面，对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中

1.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭