绝对定位absolute的好处

最新推荐文章于 2021-06-30 19:07:04 发布
最新推荐文章于 2021-06-30 19:07:04 发布
阅读量692 收藏
点赞数
分类专栏： CSS样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengmeiyanok/article/details/46242519
版权

1.不占用容器中的像素，例如：ul li中导航列表中需个关闭小按钮close，可设置一个小X图片,X设置position:absolute,父容器设置position:relative,就可以不占用容器li的像素

2.文本框的提示，td中小图标的连接，都可设置position:absolute,不占用容器的像素

3.容器显示在较上面(positon:absolute;z-index:100)，遮盖不需要显示的内容

4.提示层，弹出层设置绝对定位

rita_leng
关注
专栏目录
相对定位 relative和绝对定位 absolute
weixin_49542222的博客
08-14 458
定位布局 在定位布局中有五种定位，分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。我主要要说的是相对定位和绝对定位，一般这两个都是一起出现的。更可以说相对定位是为了当绝对定位的父亲而出现的。 相对定位（relative） 相对定位顾名思义，相对于某元素产生位移，而这个某元素就是自己本身，也就是说元素移动的时候是相对于【当前元素所在的位置】进行移动。 通过top、bottom、left和right来改变自己的位置 书写方式为 position:relative 除了这些他还有一些特性，
CSS 绝对定位属性absolute用法初探
01-29
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许开发者精确地控制元素在网页上的位置。本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`...
网页布局绝对定位(position)轻松简单
12-10
要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 其实，要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 CSS中关于定位（position）是这样定义的： 定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视
CSS(四)
不说话的娃娃鱼
09-27 318
浮动 display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* display: block 块元素 inline 行内元素 inline-blo
绝对定位和相对定位意义
HW_2000的博客
02-05 586
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 #box_relative { position: absolute; left: 30px; top: 20px; } 二：相对定位 position: relative
相对定位、绝对定位、固定定位、粘滞定位的特点
qq_46580571的博客
06-11 3037
相对定位的特点： 1.开启相对定位的元素如果不设置偏移量则元素不会移动。 2.开启相对定位的元素会提高元素的层级。 3.开启相对定位的元素参照元素自身位置进行移动的。 4.开启相对定位的元素不会改变元素的性质。 绝对定位的特点: 1.开启绝对定位的元素如果不设置偏移量则与元素不会移动。 2开启绝对定位的元素会根据父元素进行定位，如果父元素为body则会根据窗口进行定位。 3.开启绝对定位的元素会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现。 4.开启绝对定位的元会改变元素的性质
绝对定位
weixin_43152725的博客
12-27 3848
当position属性值设置为absolute时，则开启了元素的绝对定位 绝对定位： 1.开启绝对定位，会使元素脱离文档流 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化 3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 4....
绝对定位(absolute)和浮动定位(float)分析
12-02
在CSS布局中，绝对定位（absolute）和浮动定位（float）是两种常用的技术，它们各自具有独特的特性和应用场景。在创建多栏布局时，这两者都可以发挥重要作用。 **1. 绝对定位（Absolute Positioning）** 绝对定位...
绝对定位元素被遮挡的解决方法
09-25
在网页设计中，CSS的定位属性是核心知识点之一，其中绝对定位是一种常见的布局手段。使用绝对定位可以将元素放置在相对于最近已定位（非static）祖先元素的指定位置。然而，在实际应用中，绝对定位的元素有时会遇到...
CSS中相对定位relative跟绝对定位absolute的详细作用
mini_1251861209的博客
09-19 325
absolute： 首先讲一下absolute, 设置absolute时他的父标签一定要设一个relative，因为absolute就是相对它来绝对布局的，这个时候只能用top、left、right、bottom来进行布局了,像margin就没用了，那么这些上下左右就是相对那个最近的带relative的父元素来定位的 relative： 再就是relative，元素自己设置relative就...
绝对定位和相对定位详解
执着，也是一种态度
02-16 1379
层级关系为： 效果图： 为改变参照物（橘色框）后的效果 层级关系为： 效果图： 参照物为最顶级的元素情况。 层级关系为： 效果图：   仅使用margin属性布局绝对定位元素的情况 此情况，margin-bottom 和margin-right的值不再对文档流中的元素
css实现菜单过程中 relative , absolute的作用
tiger.passion
02-03 156
在用css来实现菜单时,经常需要使用position:relative;来确定起始的相对位置,,之后再在其下的子菜单中进行相对位置定义,使用position:absolute; left 0px; bottom:-27px.  ...
关于position: absolute的妙用。
zhumengzj的博客
04-02 3044
html&lt;div class="partner-text__account"&gt; &lt;span class="partner-text__account--number"&gt;{{item.total}}&lt;/span&gt; &lt;span class="cc-primary-font"&gt;+&lt;/span&gt; &lt
CSS 深入理解absolute
俊刚的博客
10-16 3014
absolute：绝对定位。越独立越强大，无依赖性。不受容器的限制。 独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏。 absolute与float不能一起使用，如果absolute生效，则float是无效的。 绝对定位可以配合margin实现相对定位。 动画尽量作用在绝对定位元素上。
绝对定位的特点
XGump的博客
07-31 3075
绝对定位的特点
绝对定位和相对定位的一些特性
weixin_30293079的博客
09-12 325
position：absolute/fixed优先级最高，有他们在时，float不起作用 postion与display:使用定位属性时，元素的display变成了inline-block，宽度从100%变成了auto postion与z-index:后者必须在定位属性下才会有效 position与overflow:当父元素使用了overflow且没有定位属性时，如果子元素是绝对定...
CSS中绝对定位和相对定位的区别及作用
热门推荐
zxh996的博客
06-30 1万+
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语 针对定位的区别及使用我整理一些方法 css的学习中，开篇就是相对定位和绝对定位的使用，大家在学习的过程中不免被其绕晕，所以我按照自己的理解对其进行了整理及分析，仅供参考学习。 未进行定位，用以下面俩种定位的区别 一、绝对定位 可以将绝对定位理解为以浏览器为父节点来定位自己 代码如下（示例）： <style>
关于absolute的几点小结
ZQY1436556395的博客
05-23 260
关于absolute的几点小结 float造成环绕效果，absolute保持跟随效果，absolute存在时float效果失效,absolute跟float一样具有包裹性，即由内容撑开宽高 absolute具有跟随性，当没有设置top/left等偏移值时，这个元素只是脱离了文档流，会对后面的元素产生影响，但它自身原来在什么位置，现在还是在什么位置（即可以依据absolute的跟随性和margin来对元素进行定位），如下面这个例子： 使用独立的absolute实现定位 下拉框与绝对定位： 大众做法： 1
关于position:absolute的小用处
CCCCt1的博客
07-20 1647
           上图插入了一个小商标，这个正是用position:absolute来写的，极大的方便了商标的插入 下面就来介绍一下这个position:absolute书写这个的过程 在html中用span行级标签去框这个小图标，而不能用块级标签 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;me...
绝对定位absolute
最新发布
09-13
绝对定位（absolute positioning）是一种元素定位的方式，通过设置元素的position属性为absolute，使得元素脱离文档流，并相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（html）进行定位。 相对于绝对定位，相对定位（relative positioning）是一种元素定位的方式，通过设置元素的position属性为relative，元素仍然处于文档流中，不会影响其他元素的位置。相对定位是相对于元素自身所在的位置定位，通过设置偏移量（如top、left等属性）来改变元素相对于自身位置的偏移。 需要注意的是，如果没有父元素设置相对定位或绝对定位，那么设置了absolute的元素会相对于html根元素进行定位，即相对于整个浏览器窗口进行定位。 总结起来，绝对定位使得元素脱离文档流，并相对于最近的已定位的祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块进行定位。而相对定位仍然处于文档流中，通过设置偏移量来改变元素相对于自身位置的偏移。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值