CSS基础（十九）--Position之Absolute根据父级框定位

最新推荐文章于 2021-12-10 15:01:59 发布
最新推荐文章于 2021-12-10 15:01:59 发布
阅读量822 收藏
点赞数
原文链接：http://www.cnblogs.com/lirongyang/p/11303754.html
版权
本文介绍了CSS中 Absolute 定位的概念，强调它需要与 Relative 结合使用来实现内部边框定位。通过实例展示了 Absolute 如何相对于父级元素固定位置，并对比了 Absolute 与 Fixed 定位的区别。内容包括 Absolute 在点赞提示等场景的应用，以及 Relative 如何作为 Absolute 的配合角色。
摘要由CSDN通过智能技术生成

随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。

#------------------------------------------------我是可耻的分割线-------------------------------------------

Absolute根据父级框定位

 

Absolute需要和relative一起使用

 

它应用于内部边框定位，比如你点赞，会弹出加1的提示，但是提示信息在点赞按钮旁弹出，如下图

Absolute和fixed效果差不多，都是固定标签位置，不同的是

最低0.47元/天 解锁文章
ancan9144
关注
子类absolute相对父类不同position的定位
萌新_zackXiong_勇闯前端~
12-12 1491
在学习前端的时候遇到过一个问题: 当子类position为absolute时,父类的position 不同时子类会怎么定位. 直接上图好理解~ 灰色框框为祖父元素 position:relative 红色框框为父元素 position: absolute/relative/inherit/…. 蓝色框框为子元素 position :absolute       各种情况:...
浅谈css position absolute相对于父元素的设置方式
12-14
大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。 有时候我们需要在父元素的容器内设置相对的绝对位置 要做到这一点需要把父元素的position属性设置为relative，设置为relative之后不设置left和top属性，这时候父元素虽然是relative的，但是还是在原来位置。 然后把子元素的位置position设置为absolute的，并设置其left，top，right，bottom属性，这样就是相对于父元素的绝对位置了。 如下html示例代码：
CSS中position的absolute如何相对于父元素的位置进行定位
wenqingzzz的专栏
07-09 1468
relative（相对）以及absolute（绝对）。 用absolute定位时，要把其上一级的元素样式属性position设置为relative。 也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。 例如如下A-B的嵌套结构     当A的position为relative时，B的position为absolute才有
div的相对定位与绝对定位
wzy_3463的专栏
06-13 936
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）  例如：＃mybox{  position:relative;  left:20px;  top:20px;  }
CSS之position=absolute之相对父元素定位
iteye_5729的博客
12-13 817
1、问题： 如果 position : absolute ，如何又相对定位？ 就是相对父元素，的绝对定位。 2、答案 当 父元素 的 position 设为 relative 时， 其子元素的 absolute position 是按照父元素的相对位置来的 3、示例 <html><head> <style type="text/css"&gt...
css position的父级,css position absolute 相对于父元素的设置方式
weixin_35379520的博客
08-04 1463
大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设置相对的绝对位置。比如下面本站视频教程页面的效果图.上图中的视频图标是一个绝对位置，它是相对于父元素的。要做到这一点需要把父元素的position属性设置为relative，设置为r...
【CSS】absolute相对于已定位的父元素
tuhuolong的专栏
01-22 1109
css定位position引发的层级关系问题详解
01-21
absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 relative：相对定位，相对自己原来的位置进行定位 fixed：绝对定位，相对浏览器窗口...
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
CSS position属性absolute relative等五个值的解释
12-13
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
css position absolute 相对于父元素的设置方式
wodxin的专栏
06-25 2582
css position absolute 相对于父元素的设置方式 更多0 css 大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。 有时候我们需要在父元素的容器内设置相对的绝对位置。比如下面本站视频教程页面的效果图.
小白前端开发笔记-有关position：absolute；为什么position：absolute；的父元素要设置position：relative；
火腿肠的博客
08-11 1097
绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。本文对此进行实验并对父元素定位的设置原因进行说明 代码： 当没有对父元素进行限定时 绿色小圆块相对于top500 left500进行定位 大方块长宽为500 定位如下 由此可见小黑块相对于整个body进行位移 当给父元素添加了position：relative时，绿色小圆块相对于
CSS基础--float的兄弟position:absolute二
chujinmaolu的博客
11-23 451
1、具有相对特性的无依赖 absolute 绝对定位 一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？ 很多人都认为是在浏览器窗口左上方。实际上，还是当前位置即html代码布局的位置，不是在浏览器左上方。正是这种错误认知导致凡是使用 absolute 绝对定位的地方，一定父容器 position:relative，同时 left/top 等属性定位，甚至必同时使用 z-index 属性设置层级。 请牢记下面这句话：absolu
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
weixin_41796631的博客
04-27 1万+
问题： CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？ 搞清楚了，正确的应该是只要父级元素=设置了position值（absolute或者relative），那么子元素的position都是以父级元素来定位的。 回答： 其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，...
林圈圈学习记录
m0_59439260的博客
12-10 91
定位 position：； 相对定位 relative 1、相对定位是该元素基于原来位置的位置偏移 2、占用原来的位置，不会脱离文档流 绝对定位 absolute 1、会覆盖住下面的文档流内容，包括文字 2、他会依据body作为参考，进行位置偏移 3、他使用绝对定位后，该元素不会占有原来的位置（脱离文档流） 4、子...
css中position:absolute与position:relative的使用问题
08-27 3678
问题描述： “如果用position来布局页面，父级元素的position属性必须为relative” 这一段经常在网上看到，一开始以为是官方标配，后面在学习的过程中有些疑问，故特意拿出来研究学习了下，发现并非如此，先说结论： 绝对定位的父级节点只要是relative、fixed、absolute其中一个即可实现容器内相对布局，以下是找到的资料印证的。（特别说明，两个position：abs...
如何根据父级元素进行相对定位
热门推荐
中华胡杨的专栏
09-17 1万+
需求：首先有个父级div，若干子元素如何根据父元素的位置进行相对定位？分析：看到这个需求，我首先想到的是position:relative；然而并不能满足需求。大家可以亲手试试，为啥不能满足呢？因为position:relative是指元素相对于在文档流中位置进行移动的，而不是以父元素为基准进行移动的。那如何解决？ 方法是：将父元素的position设为relative，将子元素的定位方法设为ab
HTML标签子元素绝对定位被父元素遮挡问题
qq_34248133的博客
07-19 1万+
请看如下示例代码： <li class="box"> <img src="...." class="hot" /> <a href="..."></a> </li> <style> .box { position:relative; } .hot { position:absolu...
CSS position属性详解：绝对定位、相对定位与固定定位
在前端网页设计中，CSS的`position`属性扮演着至关重要的角色，尤其是在复杂布局和动态元素定位时。`position`属性有三个主要值：`static`、`relative`和`absolute`，以及`fixed`，它们各自对应不同的定位方式。 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值