为什么css绝对定位是必须让父divrelative？

最新推荐文章于 2022-02-19 18:07:11 发布
最新推荐文章于 2022-02-19 18:07:11 发布
阅读量496 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013182438/article/details/58097752
版权

绝对定位：position:absolute,定位既然是绝对的那么就要有参照，要不然程序怎么知道你的left、top、right、bottom都是什么意思，所以div绝对定位默认的是以body标签为参照，而且无论你的绝对定位的div外面有几层父div，但是当你把其中一个父div设置成position:relative;那么被绝对定位的div就会以这个div为参照，自己总结的，有错误大家随时指出

xingyemeng1202
关注
专栏目录
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 5709
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
CSS绝对定位和相对定位的百分比计算以及宽高计算
qq_20243873的博客
08-18 2025
css定位设置百分比值的计算方式、绝对定位的宽高计算方式
在Vue中获取v-for的index值
Tiger_Paul的博客
02-19 7000
<el-submenu :index="item.id+''" v-for="(item,index) in menuList" :key="item.id"> <template slot="title"> <i :class="icons[index]"></i> <span>{{item.authName}}</span> </template> data() { return { ic.
使用vue时如何获取v-for数组的下标index值的方法
weixin_43968782的博客
10-28 2万+
<div v-for="(item,index) in arr" : key="index" @click="getIndex(item,index)"> <p>{{item}}</p> </div> methods:{ getIndex(item,index){ console.log(item,index) //这里的item是点击获取当前值的每一项内容 //这里的index是点击获取当前值的下标 } } ...
CSS单元的位置和层次-div标签
Henry的专栏
11-24 1620
　　我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。　　而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！　　Cascading Style
div定位 position （relative、absolute）嵌套 漂浮float 探索总结
weixin_34019144的博客
05-01 344
假设大块内部包含着小块， 用margin！ 先看大块div的情况， 要想实现div一个接着一个，那就什么都不用设置，就是默认的但不需要显示的默认设置position：static；如果要让大块div之间有间隔或者相对偏移一定尺寸，需要用margin！而不是positionrelative，下面就讲position：relative的特点： relative的特点： relative的...
绝对定位和相对定位 [1]
03-10 372
．定位的专业解释(1)语法position : static | absolute | fixed | relative (2) 说明从上面语法可以看出，定位的方法有很多种，它们分别是静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（rela
CSS定位--绝对定位是根据谁定位的？
WenDy18cm的博客
03-17 1621
绝对定位是相对于谁确定位置的？有一句口诀：子绝父相，子绝父绝。意思就是，开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。 事实上，绝对定位的元素是根据包含块确定位置的，包含块就是离他最近的开启了定位的祖先元素。 但是，如果祖先元素没有开启过定位，那就相对于初始包含块定位 什么是初始包含块？上代码！ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"&g
css绝对定位如何居中？css绝对定位居中的四种实现方法-web前端教程
web前端入门基础进阶教程-htmlcssjs
07-03 3441
在网页进行css布局时居中是经常需要用到的，其中就有css绝对定位居中，那么，css绝对定位如何实现居中？今天的这篇文章将给大家来介绍关于css绝对定位居中的实现方法。 css绝对定位居中的实现方法有很多，下面将给大家介绍css绝对定位居中的四种方法。 1、兼容性不错的主流css绝对定位居中的用法： > .conter{ > > width: 600px; height: 400px; > > position: absolute; left: 50%; top: 50%;
css定位(子绝父相)
m0_50125215的博客
03-23 2203
定位 ☆定位核心 —— 子绝父相 1.1 在开发中什么时候需要使用定位？ 定位就是解决标准流和浮动无法实现的效果。 1.2 「定位组成」 定位 = 定位模式 + 边偏移 定位模式：用于指定元素的定位方式，通过 position 属性设置 边偏移：根据定位模式确定最终位置，通过 top、bottom、left、right 四个属性设 1.3 定位模式 序号 值 语义 1 static 静态定位 2 relative ☆ 相对定位 3 absolute ☆ 绝对定位 4 fix
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
weixin_41796631的博客
04-27 1万+
问题： CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？ 搞清楚了，正确的应该是只要父级元素=设置了position值（absolute或者relative），那么子元素的position都是以父级元素来定位的。 回答： 其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，...
为什么绝对定位（absolute）的父级元素必须是相对定位
骆小胖~
10-24 6705
  【总结】    如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。     正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。     绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。 .
为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
前端下午茶
07-27 2024
其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开
CSS+DIV布局中absolute和relative区别
蓝天白云
04-03 4295
原文： http://developer.51cto.com/art/201009/225201.htm
div 父子定位，父div relative 子div absolute
清叶 的专栏
08-28 2461
&lt;div class="fu"&gt;                                   &lt;div class="a"&gt;                                       1111111111111111111111111111111111111111                                   &lt;/div...
vue.js指令v-for使用以及下标索引的获取
ShiYadong的专栏
10-26 2万+
在 v-for 代码块中，我们可以完全地访问父级作用域下的属性。 v-for 还支持可选的第二个参数，作为当前项的索引。 也可以使用 v-for 来遍历对象的属性。 {{item.name}} new Vue({ el:"#box", data:{ dataList:[
Vue2.0中v-for迭代语法变化（key、index）
热门推荐
HuangQinJian
01-01 5万+
Vue2.0中，v-for迭代语法已经发生了变
CSS绝对定位深度解析与实现步骤
在这个例子中，`#inner`元素被设置为绝对定位，并设置了`top`属性为10px，使其在父元素`#father`的右侧10像素处显示。这个示例清楚地展示了如何利用绝对定位来控制元素的位置关系。 这篇教程对于理解和掌握CSS绝对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值