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

如何在绝对div中定位div,但相对于父相对div?

在绝对定位的div中定位相对于父相对定位的div,可以通过以下步骤实现:

  1. 首先,确保父相对定位的div已经设置了相对定位的属性。可以通过在父div的CSS样式中添加position: relative;来实现。
  2. 接下来,在绝对定位的div的CSS样式中添加position: absolute;来设置绝对定位。
  3. 然后,使用topbottomleftright属性来调整绝对定位div相对于父相对定位div的位置。这些属性可以根据需要进行调整,例如使用top: 0;left: 0;将绝对定位div定位在父相对定位div的左上角。

以下是一个示例代码:

代码语言:html
复制
<style>
    .parent {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: lightgray;
    }

    .child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

在上述示例中,父div的class为"parent",子div的class为"child"。父div设置了相对定位,子div设置了绝对定位,并且通过top: 0;left: 0;将子div定位在父div的左上角。

这样,子div就相对于父div进行了定位。

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

相关·内容

【CSS】定位 ③ ( 绝对定位 | 容器有定位相对于容器定位 | 容器没有定位相对于浏览器进行定位 )

一、绝对定位 ---- 绝对定位 是以 级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 容器有定位 , 则相对于容器的坐标进行定位 ; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果容器没有定位 , 则查找容器的容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例..., 使用的就是 相对定位 ; 为容器添加了相对定位 , 子容器也会相对于 容器 进行定位 ; 二、标准流下的容器与子元素关系 ---- 1、标准流下容器与子容器代码 标准流 容器 包含一个...; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 1、容器没有定位的情况下为子容器添加定位 下面这种情况就是 容器没有定位 , 子元素 相对于浏览器进行定位 ; 完整代码示例 :...class="father"> 展示效果 : 在下面的效果 , 容器没有定位信息 , 子容器相对于浏览器进行定位

87520

Position定位

脱离文档流,也就是将元素从普通的布局排版拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。...bottom、left、right、z-index属性的设置有效,设置偏移属性后会移动相对定位元素,但它原本所占的空间不会改变,相对定位元素经常被用来作为绝对定位元素的容器块。...; } absolute absolute是绝对定位,元素的位置相对于最近的已定位元素,如果元素没有已定位元素,那么它的位置相对于,通常的使用方案是在外层嵌套一层...relative相对定位元素作为元素,再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移,绝对定位完全脱离文档流与文本流,不占据文档空间,对于top、bottom、left、right...,元素的位置相对于浏览器窗口是固定位置,即使是窗口滚动元素也不会移动,注意在的元素使用fixed是相对于进行定位的,类似于在页面创建了一个新的浏览器窗口

1K20
  • CSS布局(三) 布局模型

    相对定位 如果想为元素设置层模型相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流的偏移位置。...相对于以前的位置移动,偏移前的位置保留不动。在使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间。...绝对定位 如果想为元素设置层模型绝对定位,需要设置position:absolute(表示绝对定位),将元素从文档流拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的包含块进行绝对定位...如果不存在这样的包含块(就是它前面的div并没有设置定位的属性),则相对于body元素,即相对于浏览器窗口。...#div1{ position:fixed;     bottom:0;     right:0 }  (始终在屏幕由下端有一个div框,会一直跟着滚动条走) 相对定位可以和绝对定位混着使用 原则是:只要

    2.3K71

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

    其参数主要有以下: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个元素进行定位。...有三种情况将使得元素脱离文档流而存在,分别是 浮动,绝对定位, 固定定位。 但是在IE6浮动元素也存在于文档流。 关于浮动会脱离文档流,这里我就不解释了。...注意,它的解释是什么——“生成绝对定位的元素,相对于 static 定位以外的第一个元素进行定位。” 也就是说,它可以相对于各种各样的东西进行定位。除了 static 其他都可以!!!注意!注意!...我们可以看到,test3既没有相对于元素定位,也没有相对于爷元素定位。它居然和position:fixed一样!相对于浏览器定位了!! !!!这是一个错觉!!!...从这个试验我们可以看出,当一个元素设置了position:absolute属性之后,而它的元素的属性为position:relative则,它不再是相对于文档定位,而是相对于元素定位

    1.5K10

    CSS-定位(position)

    自动定位(默认定位方式) relative 相对定位相对于其原文档流的位置进行定位 absolute 绝对定位相对于其上一个已经定位元素进行定位 fixed 固定定位相对于浏览器窗口进行定位...# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流的位置进行定位,当position属性的取值为relative时,可以将元素定位相对位置。...其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置) 就是说,相对定位的盒子仍在标准流,它后面的盒子仍以标准流方式对待它。...子绝相就是指子元素设置绝对定位,而元素设置相对定位。 换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)为标准来定位。...自恋型) 绝对定位absolute 完全脱标,不占有位置 可以 相对于定位级移动位置(拼爹型) 固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置(认死理型)

    1.5K10

    前端基础-CSS定位

    总结: ​ 1.相对定位参考自身在标准流的位置进行偏移,移动的出发点是自身标准流的位置 ​ 2.不会对标准流的元素造成影响,没有脱离文档流,移动之后,自身在标准流还占有空间,真正占得位置还是标准流的位置...总结: ​ 1.偏移位置参考设置过定位相对/绝对/固定)的直系元素或直系祖宗元素,没找到就一直往上级找,直到html ​ 2.会脱离标准流,不再继承级的宽度(不论是块元素还是行元素,盒子的大小取决于其中内容...(一般都会配合相对定位,但不是绝对的都是相对定位相子绝 ---- 案例: ​ 1.让盒子水平垂直居中(水平居中,垂直也居中) 总结:元素使用相对定位(不脱离标准流,写多个不会覆盖),子元素绝对定位相对于盒子的位置) —相子绝...绝对定位absolute 完全脱标,不占有位置 可以 相对于定位级移动位置 固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 5.定位元素的层叠效果 控制“定位”元素的叠放层级

    62320

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

    absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位级元素来进行定位,如果找不到,则相对于body元素进行定位。...> absolute绝对定位示例 absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位级元素来进行定位,如果找不到...在上面相对定位的示例,元素相对定位是基于文档流原来的位置进行偏移定位的。那么,绝对定位是基于什么的呢? 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...那么为什么绿色的div是与body进行偏移呢?因为绿色div级元素外层div没有设置定位。 如果我给外层div设置一下绝对定位,或者相对定位,是不是就可以以外层的div进行偏移呢?...先看看原来基于定位绝对定位div情况如下: ? 将绿色div绝对定位改为固定定位,如下: ?

    3.5K40

    脱离文档流分析(转)

    脱离文档流,也就是将元素从普通的布局排版拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 只有绝对定位absolute和浮动float才会脱离文档流。  ...同样的,如果是box1向左浮动,box2和box1则会出现重叠,例5;如果在box2设置clear:left;表示左侧不允许出现浮动元素,则box2同样会下移。 ?...相对定位相对于该元素在文档流的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。...(3)绝对定位 定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。...总结:参照物用相对定位,子元素用绝对定位,并且保证相对定位参照物不会偏移即可。

    1.3K20

    【CSS3】 float浮动与position定位常见问题(个人笔记)

    f仍然没有顶上去,因为相对定位会在原位置一直占有,重绘没有回流,在设置相对定位后相邻元素不会跑到下面去,就是因为一直占有原位置,也就是说它脱离了原位置后,依然是可以盖住标准流元素的,我们可以理解为 他脱离了标准流的位置...,但是绝对定位(完全脱离了标准流)只显示了最后面一个最大的div绝对定位和有浮动都是脱离标准流,右浮动是在标准流的基础上往上面加了一层  也就是第二层 所有的浮动元素都在第二层显示,所以他们按顺序排列了起来...绝对定位呢  绝对定位是层级加一,第一个绝对定位div是3层(我为什么不说是二层呢,因为前面说了定位层级大于浮动层级),第二个是4层,第三个是五层所以他们重叠了起来了。...,这样就可以实现水平垂直居中,也可以左右为0,margin:auto,水平居中(当然,直接margin auto 也可以相对于元素进行水平居中),或者上下为0,margin:auto,垂直居中,可以理解为两边拉扯...,然后margin,平分两边,进行的水平垂直居中,这样的水平居中都是相对于定位元素居中的,如果绝对定位相对于根元素的话,就是网页中间。

    54740

    CSS再学

    绝对定位(position:absolute) 2.  相对定位(position:relative) 3. ...固定定位(position:fixed) 绝对定位: positon:absolute,这条语句的作用是将元素从文档拖出来,然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的包含块进行绝对定位...固定定位: position:fixed,与绝对定位(absolute)类似,但是它相对移动的坐标是视图(屏幕内的网页)本身。...Relative与Absolute组合使用 小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢...--相对定位元素--> 从上面代码可以看出box1是box2的元素(元素当然也是前辈元素了)。

    2K70

    CSS 常见面试题速查

    利用绝对定位将元素移除可视区 使用 clip-path 进行裁剪 # em\px\rem 的区别 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为节点字体的大小,如果自身定义了 font-size...,行级元素从左向右排列 relative 相对定位,此时的 相对相对于正常文档流的位置 absolute 相对于最近的非 static 定位祖先元素的偏移,来确定元素位置 如一个绝对定位元素的级和祖父级都为...relative,会相对级来产生偏移 fixed 指定元素相对于屏幕视口(viewport)的位置来指定元素位置 元素的位置在屏幕滚动时不会改变,比如回到顶部按钮就用此实现 sticky 粘性定位,...(电脑屏幕)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间 如何产生 根元素(HTML) z-index 值不为 'auto' 的 绝对/相对 定位...而改变绝对定位会触发重新布局,进而触发重绘和复合。 transform 使浏览器为元素创建一个 GPU 图层,改变绝对定位会使用到 CPU。

    90710

    【CSS】布局属性:position

    这是position属性,唯一不能定位的样式。 position:relative; 生成相对定位的元素,相对于其正常位置进行定位。...:top, bottom, left, right position:absolute; 生成绝对定位的元素,相对于 static 定位以外的第一个元素进行定位。...position:fixed; 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。...fixed 属性是相对于浏览器窗口定位,所以不依赖布局在什么位置。 在用absolute属性,担心受到布局限制的时候,就可以用fixed属性。...小结: position样式 功能 支持定位属性 static 无定位 无 relative 相对定位 left、top、right、bottom absolute 相对布局(static除外)绝对定位

    53030

    CSS3 positon定位详解(通俗易懂)

    绝对定位,以及sticky粘性定位。...relative相对定位 相对定位可以使用top等位移属性,相对定位相对于自己的位置进行移动。...,可以看到div3上面空出了一些空间,空出的空间就是移动前的div1和div2,relative定位的元素进行移动后还会在原来的标准流占有位置,所以div3不会上移。...absolute绝对定位 俗话说子绝相,绝对定位相对于自己的定位进行移动的,最常和相对定位一起搭配,如果级没有定位那么就会对body进行参照,绝对定位是脱离标准流的。...top就是相对于div0的顶部距离,div3的top是到body边框的距离  fixed固定定位 固定定位同样会脱离标准流,同时是相对于window窗口的定位, 固定定位演示

    46440

    position有几种,absolute和relative的区别

    空格分隔): 博文 ---- position有几种,absolute和relative的区别 1.static(默认属性),当没有给元素设置position时默认为static 2.absolute(绝对定位...),相对于级第一个设置了position属性进行定位(没有则相对于body,static除外),top,left,bottom,right均是相对于这个元素的偏移量 3.relative(相对定位...),在元素原来的位置上进行定位,top,left,bottom,right的值相当于原来位置的偏移量 4.fixed(固定定位),相对于浏览器视口的定位,不会随着滚动条的滚动而滚动,top,left,...z-index,relative的定位会受元素padding值影响 3.absolute是以第一个设置了position的元素或祖先元素进行定位,而relative定位的层总是相对于其最近的元素...参考链接 CSS+DIV布局absolute和relative区别

    2.1K20

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

    一、固定定位概念语法 ---- 固定定位 是 固定在屏幕的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局的位置 , 漂浮在任何元素上方...; 固定定位相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 的 本质是一种 特殊的绝对定位 ;...1000 像素, 方便滚动设置 */ body{ height: 1000px; } /* 最外层 容器盒子 */ .box { /* 子元素设置绝对定位 元素需要设置相对定位...- 右下角 */ .bottom { /* 子元素设置绝对定位 元素需要设置相对定位 */ position: absolute; /* 该盒子在容器右下角 */ /*

    1.8K20

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    CSS】定位 ③ ( 绝对定位 | 容器有定位相对于容器定位 | 容器没有定位相对于浏览器进行定位 ) 【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 ) 【CSS...摆放布局 , 没有任何 边偏移 的效果 ; 在 使用 定位 时 , 几乎不适用 静态定位 ; 6、相对定位 相对定位 是 盒子模型 相对于 其在 标准流的位置 设置的 ; : 盒子模型 在标准流...级元素 为基准 , 设置 边偏移 ; 为 子元素 添加 绝对定位 , 如果 容器有定位 , 则相对于容器的坐标进行定位 ; 如果 容器没有定位 , 则相对于浏览器左上角位置进行定位 ; 再次引申..., 如果容器没有定位 , 则查找容器的容器 是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述 容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例 , 使用的就是...相对定位 ; 为容器添加了相对定位 , 子容器也会相对于 容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素

    19410

    CSS学习

    层模型有三种形式: 1、绝对定位(position:absolute) 2、相对定位(position:relative) 3、固定定位(position:fixed) 绝对定位 如果想为元素设置层模型绝对定位...,需要设置position:absolute,这条语句的作用是将元素从文档六拖出来,然后使用left、right、top、bottom属性相对于最接近的一个具有定位属性的包含块进行绝对定位,如果不存在这样的包含块...,则相对于body元素,即相对于浏览器窗口。...如下边代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。...; } 相对定位 如果想为元素设置层模型相对定位,需要设置position:relative,它通过left、right、top、bottom属性确定元素在正常文档流的偏移位置

    1.2K40

    浮动、定位

    ;">div> div> div> 浮动产生负作用 边框不能撑开 背景不能显示:如果级设置了背景,而级不能被撑开,所以导致不能显示。...定位类型 值 说明 static 默认值,元素为普通布局 relative 相对定位,元素位置相对于普通位置定位 absolute 绝对定位,元素相对于position值不为static的第一位祖先元素来定位...(脱离文本流) fixed 固定定位,元素相对于浏览器窗口来定位(脱离文本流) .content { position: relative;...fixed">fixeddiv> div> 相对定位(relative):相对于自己原位置进行偏移,在文本流的位置依然存在,不脱离文档流; 绝对定位(absolute):对于position值不为...static的第一位祖先元素来定位(未找到,则相对body元素),在正常流的位置不在存在,脱离文档流; 固定定位(fixed):一直位于可视窗口的指定位置,不受滚动条影响,脱离文档流。

    2.1K20

    问题总结

    关于CSSposition定位: 开始学习的时候简单粗暴的总结了 absolute; 绝对定位相对于浏览器边界),拉动滚动条,位置随之改变。...fixed 固定位置:相对于浏览器窗口,拉动滚动条,位置不变。 relative 相对定位相对于该元素本该出现的位置:在原本应该出现的位置偏移。...选取其最近一个最有定位设置的级对象进行绝对定位,如果对象的级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。    ...注: CSS定位的层叠分级:z-index: auto | namber; 总结: absolute; 绝对定位相对于浏览器边界) 选取其最近一个最有定位设置的级对象进行绝对定位,如果对象的级没有设置定位属性...简单来说,如果div没有设置定位,他里面再套一个div设置绝对定位,里面的div不会出现在外面div里面。如果两个div都设置absolute,里面的div就是相对div来进行定位的。

    63150
    领券