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

在不知道其高度的情况下将一个div框定位在另一个绝对定位的div框下

,可以使用以下方法:

  1. 使用CSS的position属性和top、left属性来实现定位。首先,将父级div设置为相对定位(position: relative),然后将子级div设置为绝对定位(position: absolute)。接着,通过top和left属性来调整子级div的位置,将其定位在父级div的下方。
代码语言:html
复制
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 100%;
        left: 0;
    }
</style>

<div class="parent">
    <div class="child">
        <!-- 子级内容 -->
    </div>
</div>
  1. 使用CSS的flexbox布局来实现定位。将父级div设置为flex容器(display: flex),并设置flex-direction为column,这样子级div就会垂直排列。然后,通过设置flex属性来调整子级div的位置,将其放置在父级div的下方。
代码语言:html
复制
<style>
    .parent {
        display: flex;
        flex-direction: column;
    }
    .child {
        flex: 1;
    }
</style>

<div class="parent">
    <div class="child">
        <!-- 子级内容 -->
    </div>
</div>

这两种方法都可以在不知道div高度的情况下将一个div框定位在另一个绝对定位的div框下。具体选择哪种方法取决于实际需求和布局结构。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

利用这个css属性,你也能轻松实现一个新手引导库

另外为什么这里没有使用固定定位,而是使用绝对定位,其实是因为如果使用固定定位,页面可以滚动,但是高亮框并不会滚动,那么就对不上了。...window.pageXOffset + "px" this.infoEl.style.top = rect.bottom + window.pageXOffset + "px" } } 很简单,同样是创建一个绝对定位元素...step.element.getBoundingClientRect() // ... // 原有逻辑 } else { // 当前步骤没有元素,信息框定位在窗口中间...动态计算信息位置 目前我们信息框是默认显示高亮元素下方,这样显然是有问题,比如高亮元素刚好在屏幕底部,或者信息框高度很高,底部无法完全显示,这种情况,我们就需要改成动态计算方式,具体来说就是依次判断信息框能否高亮元素下方...,那么可以调整页面滚动位置,否则就不做任何处理,这两种情况对于信息框来说,都是显示高亮框下方。

36330

CSS 中你需要知道 auto 一切!

要使.item获得容器全部高度,我们可以使用以下方法之一: 给.wrapper一个固定高度,然后为.item元素添加height: 100% 对.wrapper使用...这使元素相对于包含块边缘水平居中。 ? 具有绝对定位元素 margin:auto ? 另一个不太常见绝对定位元素居中用例是margin: auto。...当我们有一个元素应该在它父元素内部水平和垂直居中时,我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中: 设置宽度和高度。...具有flex:auto项目根据宽度和高度来调整大小,但它可以根据可用额外空间来增大或缩小。 研究本文之前,我不知道这一点!...接下来我要解释是对我来说是新,我研究本文时学到了它。 考虑下面的模型: ? 我们有一个有内边距 wrapper 元素,还有一个子项。子项目是绝对定位,但没有任何定位属性。

5.1K30

【前端攻略--HTMLCSS】html 文档流理解

一个元素脱离正常文档流后,依然文档流中其他元素忽略该元素并填补原先空间。 基于文档流,理解以下定位形式: 相对定位:元素框偏移某个距离。...元素仍保持定位形状,它原本所占空间仍保留。 绝对定位:即完全离开文档流, 相关于position属性非static值比来父级元素进行偏移。...absolute:绝对定位。将对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近一个最有定位设置父对象进行绝对定位。如果不存在这样父对象,则依据body对象。...对象不可层叠,但依据left,right,top,bottom等属性正常文档流中偏移位置。当对象定位在浏览器窗口以外,浏览器因此显示滚动条。 static:元素框正常生成。...再举一个大家日常经常遇到问题来印证—高度自适应 反复想一想,高度自适应原理其实就是这个:   这是b   <div id=”c

2.3K20

CSS StickyFooter——当内容不足一屏时footer紧贴底部

所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部情况,因为比较难以描述,所以干脆使用了英文标题,要实现效果如下: 第一个和第三个为正常不处理情况,第二个和第三个是我们要实现情况 ?...这里我们先讨论下ie8+情况,然后来讨论下更高级flex实现。...ie8+ 实现思路为:设置body最小高度为100%,相对定位,然后空出底部高度,关键是要设置盒模型box-sizing为border-box或padding-box,最后footer绝对定位在底部即可...: absolute; /* footer绝对定位在底部 */ left: 0; bottom: 0; width: 100%; height: 120px; } flex...主要思路是设置flex方向为垂直方向,然后设置内容占满其余空间 html代码如下: <div class="container

1.7K70

UI自动化之多窗口定位下拉框元素+保存页面快照实战

# Select类中提供了很多方法可在下拉框定位中使用,下面具体介绍这些方法应用,昨天分享百度下拉框实战代码: # -*-coding:utf-8-*- # author:shichao # ...# Select类中提供了很多方法可在下拉框定位中使用,下面具体介绍这些方法应用 from selenium import webdriver # 导入select类,由selenium提供 from...select = Select(gpc) # 实例化Select类 select.select_by_visible_text('最近一天') # 按照取文本方法来选择下拉框下内容 ''' 定位下拉框方法有很多...select.select_by_index(1) # 按照索引去选择下拉框内容 ps:索引是从0开始,0为第一个"最近一天第二个所以填为1" ''' print('下拉框选择最新内容是:'..., gpc.get_attribute('value')) t.sleep(2) dr.quit() 接着昨天下拉框定位分享,今天我们接着前几天学习多窗口实战进行结合操作[ 多窗口定位下拉框元素以及保存页面当前快照实战

2K10

CSS StickyFooter——当内容不足一屏时footer紧贴底部

所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部情况,因为比较难以描述,所以干脆使用了英文标题,要实现效果如下: 第一个和第三个为正常不处理情况,第二个和第三个是我们要实现情况 ?...这里我们先讨论下ie8+情况,然后来讨论下更高级flex实现。...ie8+ 实现思路为:设置body最小高度为100%,相对定位,然后空出底部高度,关键是要设置盒模型box-sizing为border-box或padding-box,最后footer绝对定位在底部即可...: absolute; /* footer绝对定位在底部 */ left: 0; bottom: 0; width: 100%; height: 120px; } flex...主要思路是设置flex方向为垂直方向,然后设置内容占满其余空间 html代码如下: <div class="container

1.2K10

HTML+CSS+PS 编写京东商城首页

编写HTML以及CSS 可以从图标显示来看,图标可以使用绝对定位来解决。 首先写一个div来显示看看,如下: ? 浏览器显示如下: ? ---- 设置背景颜色以及图标的颜色,查看如下: ?...要注意布局方式不使用float:left;浮动布局,最好就是绝对定位,方便进行居中定位。 而如果使用绝对定位,那么就是需要设置display:inline-block;行内块方式来进行布局。...这里面其实中间有一个div嵌套一个宽度很大ul,然后给li设置float:left来处理。最后通过绝对定位ulleft参数改变来实现移动效果。 ?...这个我代码编写后期修改了,没在这篇中体现出来。不过本篇章也讲述了一个大概实现过程。...较好布局思路: 从上到下,从左到右,使用div设定好宽度、高度、背景色,基于文档流进行布局,不要一上来就使用绝对定位这种方式。

3.5K50

解决CSS垂直居中几种方法(基于绝对定位,基于视口单位,Flexbox方法)

一、代码初始化     我们基于如下这段HTML代码,id='content'div元素id='box'div张垂直居中。...二、基于绝对定位解决方法       如果我们想要利用绝对定位方法进行垂直剧中的话,那么就要求元素具有固定宽度和高度,如果没有固定宽度和高度就无法实现,因为需要利用top和left值,进行定位...通常情况下,对那些需要居中元素来说,尺寸往往是由其内容来决定。如果能找到一个属性百分比值以元素自身宽高作为解析基准,那我们难题就迎刃而解了!...五、绝对定位结合translate()方法 (不确定宽高情况下)  使用绝对定位top和left设置为50%,再将元素本身使用translate分别沿着x和y轴移动-50%,此方法可以不知道div...虽然没有垂直居中效果,但也是完全可以接受。   Flexbo 另一个好处在于,它还可以匿名容器(即没有被标签包裹文本节点)垂直居中。

1.7K70

脱离文档流分析(转)

脱离文档流,也就是元素从普通布局排版中拿走,其他盒子定位时候,会当做脱离文档流元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。  ...解决方法: 1、要么给.container设置固定高度,一般情况下文字内容不确定多少就不能设置固定高度,所以一般不能设置“.container”高度(当然能确定内容多高,这种情况下“..container...如果没有明确设定包含容器高度情况下,它要计算内容全部高度才能确定在什么位置hidden,这样浮动元素高度就要被计算进去。这样包含容器就会被撑开,清除浮动。...注意,即使不设置值同样起到了相对定位作用,子孙级别标签使用position:absolute;时同样会起到定位效果,position:relative另一个主要用法:方便绝对定位元素找到参照物。...(4)fix定位     元素框表现类似于 position 设置为 absolute,不过包含块是视窗本身。

1.3K20

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

固定定位元素 始终显示浏览器可视窗口定位置 , 不会改变 ; 注意相对是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 本质是一种 特殊绝对定位 ;...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码基础上 , 中心标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;...DOCTYPE html> 固定定位示例 /* 设置高度...- 右下角 */ .bottom { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolute; /* 该盒子父容器右下角 */ /*...div> 展示效果 : 默认进入后样式 : 滚动拖动条后效果 :

1.7K20

css(2)

1.8float(浮动) css中任何元素都可以浮动,浮动特点: 浮动框可以左右移动,直到碰到网页边框或者另一个浮动框,浮动框可以覆盖固定框,而且浮动框会把原来框占有的位置让出来。...(需要说明,浮动框可以覆盖固定框,但是覆盖不了固定框文本内容,这些文本内容会被挤出到浮动框下方显示)(另外本人试浮动p标签改成块标签无法覆盖固定块标签div,但是浮动div可以。)...对象遵循正常文档流,但依据top,right,bottom,left等属性正常文档流中偏移位置。而其层叠通过z-index属性定义。...注意:position:relative一个主要用法:方便绝对定位元素找到参照物。 1.10.3absolute(绝对定位,重要) 定义:相对于已经定位过得父标签再做定位。..."c3">回到顶部 脱离文档流: 浮动元素、绝对定位、固定定位 不脱离文档流:   相对定位 1.10.5z-index #i2 { z-index: 999; }

1.4K20

CSS定位概述

CSS中有三种基本定位机制:普通流,浮动和绝对定位。...2.绝对定位:absolute 相对定位实际上依然是存在文档流中,但绝对定位则会使元素脱离文档流,绝对定位元素是相对于距离他最近得已定位祖先元素确定,如果元素没有已定位祖先元素,那么它位置是相对于初始包含块...绝对定位同样可以通过z-index来对设置叠放层次。 3.固定定位: 顾名思义,固定在浏览器某一位置。 4.浮动:float 浮动框可以左右移动,直至碰到包含框或另一浮动框边缘。...通过更多例子来说明浮动和清理,假设有一个图片和文本,你想让图片在左,文本右,两者被包含在一个div中。...解决办法通常有三种: 1.添加一个div空元素news里面,并对设置clear属性,浏览器会自动赋予外边距。如图: 缺点:添加无意义元素。

90020

【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 样式 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )

一、使用 CSS 实现三角形 ---- 使用 CSS 实现三角形步骤 : 首先 , 宽度 / 高度 设置为 0 ; /* 宽高设置为 0 像素 */ width: 0; height:...="box2"> 显示效果 : 下面是放大 400% 后效果 ; 设置 10 像素边框 , 形成三角形底部边为 20 像素 ; 三、使用 CSS...title>CSS 三角形示例 body { background-color: black; } .triangle { /* 子元素使用绝对定位...父容器需要使用相对定位 */ position: relative; /* 设置对话框下矩形框尺寸 */ width: 200px; height: 100px;...background-color: white; /* 浏览器水平居中 */ margin: 100px auto; } .triangle-in { /* 三角形使用绝对定位

90330

CSS进阶04-块格式化上下文BFC

就是说对于标准流中块级非替换元素,如果overflow最终计算结果为visible,那么高度只会考虑标准流中子元素(比如,移动和绝对定位盒子是会被忽略,相对定位盒子只会考虑未被定位位置...如果该元素有块级子元素,高度为最上块级子盒上外边距边缘到最下块级子盒下外边距边缘距离。 绝对定位子元素会被忽略,相对定位盒不需要考虑位移。注意子盒可能是匿名块盒。...此外,如果该元素有下外边距边缘低于该元素下内容边缘浮动子元素,那么高度增大来包含那些边缘。只有参与本块格式化上下文浮动才考虑在内,比如,绝对定位后代中或者其他浮动中浮动就不考虑。...4.2 可以看到,div2即使包含在另一个块盒中,但是如果与div1一个BFC且相邻,一样会产生margin折叠。...这时如果让div2处于一个BFC下,则与处于另一个BFC下div1不再会有margin折叠。

57530

网页布局基础

浮动框可以左右移动(根据float属性值而定),直到它外边缘 碰到包含框或者另一个浮动元素边缘。 浮动元素不在文档普通流中,文档普通流中元素表现就像浮动元素不存在一样。...这样的话,该框及其所有内容就不再显示,不占用文档中空间。 但是一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div开头。...不过,设置行高可以增加这个框高度。 10.绝对定位布局 绝对定位布局就是使用position属性实现网页布局,是CSS中规定第三种定位机制。...(固定定位): 元素框表现类似于 position 设置为 absolute,不过包含块是视窗本身。...>自适应宽度列(因为绝对定位元素会导致父元素高度塌陷,所以一定要保证固定宽度列高度>自适应宽度列,才能让绝对定位元素放进父容器里)

1.8K20

【字节前端青训营】跟着月影学JavaScript—— 前端代码优化三大原则之组件封装,用原生JS写一个轮播图并封装

html,css,js,output 分析 1.结构设计:HTML 轮播图是一个典型列表结构,我们可以使用无序列表元素来实现 2.表现:CSS 使用CSS绝对定位图片重叠在同一个位置 轮播图切换状态使用修饰符...,返回items数组中位置 getSelectedItemIndex() { // Array.from() 方法对一个类似数组或可迭代对象创建一个,浅拷贝数组实例...绝对定位在50%处 上边框上移盒高度一半*/ margin-top: -25px; width: 30px; height: 50px;...绝对定位在50%处 上边框上移盒高度一半*/ margin-top: -25px; width: 30px; height: 50px;...绝对定位在50%处 上边框上移盒高度一半*/ margin-top: -25px; width: 30px; height: 50px;

1.8K20

html中下拉菜单(html做下拉菜单栏)

datalist 标签下放列表项。 html5下拉列表怎么定位急。。...下面我们通过代码与案例接受select跳转菜 html5怎么实现div+css二级下拉菜单 1.外部为ul标签,每个li里嵌套一个ol列表 2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位...3.设置ol高为0,溢出隐藏 4.外部li标签:hover 时,设置ol高度。...没有设置position属性时,页面显示如下(见图1),T1并未遮挡住T2,但HTML5让导航栏固定顶部不动且不遮挡住下面的DIV方法如下: 1,首先在html中,添加良好导航内容。...2,后者是网页具体内容,这里代码比较简单。 3,样式中,首先在菜单中定义一些样式。 4,此时,在运行页面时,滚动条滚动后导航消失。

11.3K40

CSS布局(六) 对齐方式

如果被设置元素为文本、图片等行内元素时,父元素中设置text-align:center实现行内元素水平居中,子元素display设置为inline-block,使子元素变成行内元素 ?...场景1:子元素是行内元素,高度是由其内容撑开 这种情况下,需要通过设定父元素line-height为高度来使得子元素垂直居中 ?...,在这种情况下实际上是不知道子元素高度,无法通过计算得到padding或margin来调整,但是还是存在一些解法。...场景3:子元素是块级元素且高度已经设定 计算子元素margin-top或margin-bottom,计算方法为父(元素高度-子元素高度)/2 <div...3.3相对+绝对定位 使用absolute,利用绝对定位元素盒模型特性,偏移属性为确定值基础上,设置margin:auto .parent{ position: relative

1.9K50

css-height

绝对定位元素高度 设置height:100%;,受其父级定位元素影响; 不设置任何高度,默认为height:auto;,受子元素内容高度影响(前提,子元素未脱离文档流); 示例:absolute元素height...注意:绝对定位,元素相对于position值不为static第一位祖先元素来定位(脱离文本流) 示例:父级定位元素高度100%,子元素absolute不设置高度,孙子元素也是absolute有指定高度...注意: 这是定位元素受到父级定位元素高度影响行之有效方式! 绝对定位元素父级高度与元素本身大小无关,直到文档后面的元素都被处理完毕,才可能知道高度。...inhert height:100%和height:inherit大部分情况下是一致,只有当子元素为绝对定位元素,同时,父容器position值为static时候,会有一定差异性! <!...总之,这里,height:inherit强大好用可见一斑。回头,容器高度变化了,里面的绝对定位元素依然高度自适应。

1.1K21

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券