absolute元素

最新推荐文章于 2020-08-07 16:29:12 发布
最新推荐文章于 2020-08-07 16:29:12 发布
阅读量320 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/april_4/article/details/52909982
版权

看张鑫旭老师的课，尽量少用relative和absolute联合，absolute元素定位不依赖relative，应该尽量的避免使用relative

relative对absolute的限制作用

1 overflow：hidden 对absolute是无效的，但是如果父元素加上relative，就可以

2 z-index层级：只以父元素的（relative）的层级为主（容易出现层级覆盖的bug~）

3 限制了left/top/right/bottom定位


无定位的absolute元素，会跟随在DOM顺序前兄弟inline或者inline-block元素的后面，没有会挨着父元素的左content边框

如果DOM顺序前为block元素，则无定位的absolute元素会被挤到下一行


Miya_Ye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【css】absolute实现元素定位
richest_qi的博客
08-05 512
文章目录absolute+margin定位图标图标文本对齐 absolute+margin 定位图标 <body> <span class="icon-box">三十而已<i class="icon-hot"></i></span> </body> .icon-hot{ background:url(./imgs/hot.png) no-repeat center; display:inline-block
absolute定位元素的特点
少油少盐不要辣
03-28 1354
1.什么是定位元素？ 就是元素的position属性值为：fixed，absolute，relative三者之一，则为定位元素。 那么static的元素呢？为常规流元素。网页布局中，元素的排列方式一般三种，常规流，浮动，定位 2.先说下absolute，fixed元素的特点 该元素变为块盒，即display值为block。 - 当元素为fixed时，可以利用该特点，实现网页布局中，水平，垂直...
有关float、position:absolute及a元素
一笑生花
07-23 338
1.float与position:absolute的异同点 相同点：都会是元素脱离文档流 不同点：1）float使元素脱离文档流后，以前的位置会被回收，相邻元素盒子会无视它的存在，从而占据它原始的位置，但是元素中的文本内容会识别到它的存在，从而围绕它排列。效果如下图 2）position:absolute使元素脱离文档流后，以前的位置会被回收，相邻元素盒子以及元素中的文本内容都会无视它的...
元素定位(1)--absolute与float
Alaricming's Blog
09-24 222
absolute:1.absolute具有包裹性2.位置跟随 ？ 3.给某一元素添加position:absolute 1》不设置左右值：该元素在页面显示中仍旧处于原来位置；几个相邻元素同时绝对定位时，由于前者脱离文档流，后者上前补充由此，则后者的绝对定位的原始位置已经变成了前者所处的位置，几个元素最终占据了相同位置，且后来者居上； 2》设置左右值偏移值：相对定位和绝对定位都是相对于父级的相
CSS绝对定位absolute详解
嘿嘿
01-16 2万+
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。 先说absolute和float的相似处：包裹性 和 高度欺骗 包裹性 所谓一图胜千言（唯一的区别是：下图的div增加了absolute） <div style="border:4px solid blu...
CSS position:absolute全面了解
09-24
在CSS布局中，`position:absolute`是一个重要的属性，它允许元素相对于最近的非静态定位祖先元素（如果存在）或初始包含块（通常是浏览器窗口）进行定位。本篇将全面探讨`position:absolute`的特征、用法及其对布局...
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
09-05
这里提到的问题是关于IE6、IE7以及在IE8、9、10中使用IE7兼容模式下，对于绝对定位（absolute）或相对定位（relative）的父元素和子元素的显示与隐藏的一个特定bug。这个bug主要涉及到元素的`display`属性。 通常，...
css中定位中的absolute和relative是什么意思
09-25
理解`relative`和`absolute`定位的关键在于它们如何影响元素自身及其周围元素的位置。`relative`定位允许元素在文档流中微调位置，而不改变其他元素的布局；而`absolute`定位则让元素可以完全独立于文档流，根据需要...
浅谈css元素居中
09-24
`，子元素设为`position: absolute; top: 50%; left: 50%;`，然后通过负外边距`margin-top: -height/2; margin-left: -width/2;`调整子元素位置，使其垂直居中。 3. **使用Flexbox布局**：在现代浏览器中，可以利用`...
ie6下position：absolute不显示问题解决方法
09-25
`position: absolute`是CSS定位属性中的一个关键概念，它使元素脱离文档流，并根据最近的已定位祖先元素（如果存在）或者初始包含块进行绝对定位。在大多数现代浏览器中，这个属性都能正确地工作，但在Internet ...
position:absolute引起的遮挡其他元素的问题
weixin_42137023的博客
10-22 1万+
  bug 是这样的，发现子集的元素定位来个负数 bottom:-10px; 然后再父级的上面加overflow:hidden;发现还是不管用 解决方案在相对定位（position:relative）容器 上来个overflow：hidden；问题就解决了，不要加错 最终问题解决 ...
absolute绝对定位的元素显示不出来的可能原因
hzxOnlineOk的博客
08-07 1万+
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
绝对absolute定位后，元素宽度问题
qq_45219069的博客
02-22 5433
由于设置了绝对定位，宽度以子元素内容的宽度一致，此时设置什么最小宽度那些都没用，但是又不能写死宽度，需要根据内容来撑开 采用 white-space: nowrap；强制不换行，让其内容撑开 position: absolute; white-space: nowrap; 前 后 ...
CSS之margin和padding、absolute和relative用法
u011407281的专栏
12-23 3241
相信刚开始写WEB前台页面的时候，经常会有一些搞得不太清楚的CSS样式：如margin和padding、absolute和relative！         一、对于margin和padding来说，不太注意的话，感觉这两者区别不大。但要写一个好的页面出来，还是需要对这二者的区别熟悉： 区别其实总结起来就是一句话：margin是对外的边距，padding是对内的边距 示例： 你好
关于子元素的absolute定位
abczdefg的博客
09-20 1225
关于子元素（如div）在父元素（如div）中的定位问题：假设现有html代码如下<div class="div1"> <div class="div2> test </div> </div>想让div2在div1中实现底部居中的效果，查找资料发现关键步骤（CSS）是div { width: 100px; height: 100px;
元素absolute定位后，高宽如何计算?
风海生
07-23 2602
当元素absolute定位后，他的高宽默认为多少？ 如果不写width, height，他们的值都默认为0；   设置width: 100%;height:100%后，宽度会如何计算? 设置width: 100%; height: 100%; 后，他们的值会继承自它相对于定位的那个祖先元素     其本身的padding，margin还有用吗吗？ margin，padding仍然是有效...
为什么绝对定位（absolute）的父级元素必须是相对定位
骆小胖~
10-24 6692
  【总结】    如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。     正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。     绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。 .
Absolute（绝对定位）与relative（相对定位）的图文讲解
热门推荐
weixin_42067967的博客
04-30 9万+
Position的属性值有：1.     Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2.     Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3.     Relative：相对定位，是相对于其原本的位置来定位的。4.     Static：默认值，没有定位。5.     Inherit：继承父元素的position值。对于初...
CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）
我不是水哥
12-10 2万+
在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性 在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工...
absolute子元素居中
最新发布
07-17
要使绝对定位的子元素居中，可以以下方法： 1. 使用绝对定位和负边距：设置子元素的左、右、上、下边距为负的一半，然后将左和上边距设为50%。这将使子元素的中心与父元素的中心对齐。例如： ```css .parent { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值