首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使第一个div元素posititon:absolute(相对于body),使我的后续div隐藏在我的第一个div下

要实现将后续的div隐藏在第一个div下面,可以通过给第一个div设置position属性为absolute,并将后续div的position属性设置为relative来实现。

具体的步骤如下:

  1. 首先,在CSS中给第一个div设置position:absolute;
  2. 给第一个div设置一个固定的宽度和高度,以便让后续div能够在它的下方显示;
  3. 给后续的div设置position:relative,并设置一个较大的top值,确保后续div在第一个div的下方隐藏起来。

以下是一个示例的HTML和CSS代码:

HTML代码:

代码语言:txt
复制
<div class="first-div"></div>
<div class="second-div"></div>

CSS代码:

代码语言:txt
复制
.first-div {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
}

.second-div {
  position: relative;
  top: 250px;
  width: 200px;
  height: 200px;
  background-color: blue;
}

在这个例子中,第一个div的position属性设置为absolute,宽度和高度都设置为200px,背景色为红色。后续的div的position属性设置为relative,top值设置为250px,宽度和高度都设置为200px,背景色为蓝色。这样后续的div就会隐藏在第一个div的下方。

对于腾讯云相关产品和产品介绍链接地址,这个问题与云计算、IT互联网领域的名词无关,因此不需要提供相关链接。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Chrome 125:CSS 锚点定位来了!

觉得 CSS 锚点定位 API (CSS anchor positioning API)可以在一定程度上改变 Web 开发方式,因为它允许我们以原生方式定位相对于其他元素(称为锚点)元素。...我们可以通过下面两种方式之一来将这个锚点关联到其他元素式锚点(Implicit anchors) 将锚点关联到另一个元素第一种方法是使用式锚点,我们可以看下面的代码。....positioned-notice { position-anchor: --anchor-el; } 通过这种式锚点关系,我们可以使用 anchor() 函数定位元素,而不需要在其第一个参数中显式指定锚点名称...,我们可以设置相对于多个锚点定位位置值,通过使用 anchor() 函数并明确说明在第一个参数中引用锚点: .anchored { position: absolute; top: anchor...">基于两个元素进行锚点定位Å .one, .two { position: absolute; padding: 1rem; border: 2px solid; background

21610

css(2)

> div 是span ?...使块级元素变成行内元素 inline-block 使元素同时具有行内元素和块级元素特点 displaynone和visibilityhidden区别:两者都可以隐藏元素,但是display将元素隐藏之后...,默认第一个参数控制上下,第二个参数控制左右,如果写三个参数则第一个控制上,第二个控制左右,第三个控制,如果四个全写则控制顺序为上、右、、左(顺时针)。...1.10.2relative(相对定位,了解) 相对定位是相对于该标签原来位置进行定位。有趣是,即使设定了元素相对定位以及偏移值,元素还占有着原来位置,即占据文档流空间。...注意:position:relative一个主要用法:方便绝对定位元素找到参照物。 1.10.3absolute(绝对定位,重要) 定义:相对于已经定位过得父标签再做定位。

1.5K20
  • Css 详细解读定位属性 position 以及参数

    其参数主要有以下: absolute 生成绝对定位元素相对于 static 定位以外第一个元素进行定位。...百度了一相对严谨解释: 将窗体自上而下分成一行行, 并在每行中按从左至右顺序排放元素,即为文档流。  每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行一端。 ...下面,我们看一实际效果。 如上图演示,给test3加上了position:relative定位效果。...注意,它解释是什么——“生成绝对定位元素相对于 static 定位以外第一个元素进行定位。” 也就是说,它可以相对于各种各样东西进行定位。除了 static 其他都可以!!!注意!注意!...它元素属性是 position:absolute 好,我们来看一,如果position:absolute嵌套position:absolute元素将会出现什么情况呢?

    1.5K10

    CSS 定位布局 - 相对、绝对、固定三种定位

    absolute 生成绝对定位元素元素脱离文档流,不占据文档流位置,可以理解为漂浮在文档流上方,相对于上一个设置了定位父级元素来进行定位,如果找不到,则相对于body元素进行定位。...> absolute绝对定位示例 absolute 生成绝对定位元素元素脱离文档流,不占据文档流位置,可以理解为漂浮在文档流上方,相对于上一个设置了定位父级元素来进行定位...因为上面缩放了浏览器宽度一半。 ? 那么为什么绿色div是与body进行偏移呢?因为绿色div父级元素外层div没有设置定位。...如果给外层div设置一绝对定位,或者相对定位,是不是就可以以外层div进行偏移呢? 先给外层div设置相对定位来看看: ?...> 那么如果,想要将第一个蓝色div不被覆盖,那么就可以设置蓝色div层级为10(因为默认元素层级小于10) ?

    3.4K40

    CSS Position 定位

    #2.2 position: relative 该关键字元素先放置在未添加定位时位置,再在不改变页面布局前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。...#2.3 position: absolute 不为元素预留空间,通过指定元素相对于最近非 static 定位祖先元素偏移,来确定元素位置。...绝对定位元素可以设置外边距(margin),且不会与其他边距合并。 生成绝对定位元素,其相对于 static 定位以外第一个元素进行定位,会脱离normal flow。...---- 因为 content 元素 container 没有设置 position,默认为 static,所以找到第一个元素body(),可以看成是元素(content)相对于 body...在所有情况(即便被定位元素为 table时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素位置仍按照 B 未定位时位置来确定。

    1.1K10

    CSS&HTML面经专题——(三)CSS定位盒模型经典布局浮动布局与BFC

    absolute a、绝对定位,对象脱离常规流,此时偏移属性参照是离自身最近定位祖先元素,如果没有定位祖先元素,则一直回溯到body元素。...b、元素定位参考是离自身最近定位祖先元素,要满足两个条件,第一个是自己祖先元素,可以是父元素也可以是父元素元素,一直找,如果没有则选择body为对照对象。...,比如这个盒子水平垂直居中问题,可以从项目说起,说在项目中就经常会遇到需要元素居中问题,一开始总用...后来学习了好用弹性布局...再后来逛博客比如掘金啊什么,看到了什么什么方法,觉得也挺好用好实现...父元素相对定位,那绝对定位元素宽高若设为百分比,是相对谁而言?...相对于元素(content + padding)值, 注意不含border 延伸:如果子元素不是绝对定位,那宽高设为百分比是相对于元素宽高,标准盒模型是content, IE盒模型是content

    2K31

    Web前端学习 第2章 网页重构9 css定位

    3 25 26 从上面代码效果中,我们可以了解以下几点: 绝对定位元素脱离文档流,并不占位,第一个div和第三个...24 25 从上面代码效果中,我们可以了解以下几点: 相对定位元素不脱离文档流,元素占位,第一个div和第三个div不相邻,中间间距就是相对定位元素位置。...">3 27 28 从上面代码效果中,我们可以了解以下几点: 固定定位元素脱离文档流,并不占位,第一个div和第三个div相邻。...定位坐标分别是top:50px;left:50px;这个值是元素左上角距离原定距离。 当混轮滚动时候,固定定位元素永远相对于窗户位置定位。...这样做其实是不可以,在制作网页过程中,我们不仅要将元素放在指定位置,还要考虑网页后续可维护性,已经针对不同屏幕尺寸适应能力。因此,定位是我们实现网页布局最后手段。

    51730

    css属性及定位操作

    大家好,又见面了,是你们朋友全栈君。 字体属性 文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。...display:”inline-block” 使元素同时具有行内元素和块级元素特点。...: 提供一个,用于四边; 提供两个,第一个用于上-,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于; 提供四个参数值,将按上-右--左顺序作用于四边; 浮动(float...relative(相对定位) 相对定位是相对于元素在文档流中原始位置,即以自己原始位置为参照物。有趣是,即使设定了元素相对定位以及偏移值,元素还占有着原来位置,即占据文档流空间。...absolute(绝对定位) 定义:设置为绝对定位元素框从文档流完全删除,并相对于最近已定位祖先元素定位,如果元素没有已定位祖先元素,那么它位置相对于最初包含块(即body元素)。

    2.4K50

    CSS布局(三) 布局模型

    绝对定位 如果想为元素设置层模型中绝对定位,需要设置position:absolute(表示绝对定位),将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近一个具有定位属性父包含块进行绝对定位...如果不存在这样包含块(就是它前面的div并没有设置定位属性),则相对于body元素,即相对于浏览器窗口。...绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素布局就当绝对定位元素不存在时一样,仍然在文档流中其他元素将忽略该元素并填补他原先空间。...div定义了定位属性,子div就会跟着父div位置去再定位 4.说一z-index 4.1简单演示 利用z-index,可以改变元素相互覆盖顺序。...:100px;height:100px;z-index:10;"> 虽然第一个divz-index比第二个div大,但是由于第一个div未定位,其z-index属性未起作用,所以仍然会被第二个

    2.3K71

    【融职培训】Web前端学习 第2章 网页重构9 css定位

    3 25 26 从上面代码效果中,我们可以了解以下几点: 绝对定位元素脱离文档流,并不占位,第一个div和第三个...24 25 从上面代码效果中,我们可以了解以下几点: 相对定位元素不脱离文档流,元素占位,第一个div和第三个div不相邻,中间间距就是相对定位元素位置。...">3 27 28 从上面代码效果中,我们可以了解以下几点: 固定定位元素脱离文档流,并不占位,第一个div和第三个div相邻。...定位坐标分别是top:50px;left:50px;这个值是元素左上角距离原定距离。 当混轮滚动时候,固定定位元素永远相对于窗户位置定位。...这样做其实是不可以,在制作网页过程中,我们不仅要将元素放在指定位置,还要考虑网页后续可维护性,已经针对不同屏幕尺寸适应能力。因此,定位是我们实现网页布局最后手段。

    38410

    CSS基础学习(3)

    absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative(相对定位) 使用relative(相对定位) 来实现 relative在默认文档流布局...absolute后,改图片将会脱离信息流,其它照片依次向上移动,占据第一张图片位置 MDN解释: 元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近非 static 定位祖先元素偏移...绝对定位元素可以设置外边距(margins),且不会与其他边距合并 关键词 : 最近 和 非static定位 和 祖先元素 步骤 首先获取第一张照片元素 发现是absolute布局 找寻父节点... 未配置position ,所以默认为position=static; 不符合非static 继续寻找父节点 ,, 到...已经没有父节点,所以按照位置为标准进行偏移 1-4 Position-fixed(固定位置) 作用:使一个标题·固定,不随页面的滑动移动 h1 { position

    65730

    CSS3 做一个旋转立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)

    若是大一学子或者是真心想学习刚入门小伙伴可以私聊,若你是真心学习可以送你书籍,指导你学习,给予你目标方向学习路线,无套路,博客为证。...一、transform-origin transform-origin 用于更改当前元素中心点,使元素在根据中心点做一些动效使做出更多姿态。.../img/img05.jpg" /> 接着,咱们使第一个 0,也就是 x 表示沿 x 轴进行旋转,若用一个正方体做比方,此时该点应该是在此位置...100%; margin: 200px auto; text-align: center; } 接着在 body编写 div,使其调用该样式: <div class...这是用于包裹 3d 盒子,在此我们制作3d 盒子是通过对 div 进行翻转,我们需要在这个 div 创建 6 个 div 表示其 6 个对应面,并且这 6 个面必须有一定大小,在此创建一个样式为其设置宽高

    66320
    领券