position:absolute详解

最新推荐文章于 2024-07-23 22:34:05 发布
最新推荐文章于 2024-07-23 22:34:05 发布
阅读量1.9k 收藏 4
点赞数 2
文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuxingseng123/article/details/129408766
版权

position:absolute详解

日常开发中，经常会涉及元素的定位，我们都知道，绝对定位相对于最近position不为static的父级元素来定位，但其中定位的位置还是有细微的差别的。
绝对定位根据left和top属性来规定绝对定位元素的位置。
在这里插入图片描述

基本特定

绝对定位的第一个调整在于会从文档流中脱离，不受其他元素的影响，定位是绝对的，所以称之为绝对定位，如果是相对定位，会受其他元素影响，则定位是“相对”的
未使用定位：即元素在其他文档中：
在这里插入图片描述
当我们给元素加上绝对定位的时候，元素会脱离当前文档流；
在这里插入图片描述
也就是说绝对定位的元素再文档流中没有位置，它从文档流中脱离了出来，后面的元素会填充掉它原来的位置；

big_matster
关注
CSS基础-position: absolute绝对定位的默认位置
m0_51757444的博客
05-13 1395
绝对定位position的值为absolute时的默认位置 前言 今天上午练习定位时发现了这么一个东西： 元素设置为绝地定位后不给它添加top时是正常的我想要的结果； 添加top后还需要精确的计算。 正文 感觉你也应该开始好奇默认值是啥了，来一起看看吧： 比如这是我想要的效果 很简陋，但是调试嘛，就先这样吧，不要嫌弃~ 当我鼠标放上去时“阳阳”两个字的下面出现红色的块块， html代码是这样的： <body> <ul> <li class="it
position属性absolute与relative 详解
weixin_34352005的博客
07-15 2231
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，r...
CSS：position属性
最新发布
ChinaDragon10的博客
07-23 557
CSS：position属性 fixed、absolute、relative
position:absolute
banchengp的博客
11-16 1482
1、float与absolute 当float和absolute同时存在的时候，float时么有任何效果的，所以没有必要同时启用float和absolute 两个具有相似性，相似点包括 块状化和浮动类似，直接把元素display表现成block或者是table 破坏性，破坏正常的流的持续性。 块状格式化上下文 BFC 包裹性，元素不会自动填充，而是由内容撑起来的 所以没...
[CSS] position：absolute
qq_41700921的博客
04-04 655
position：absolute 使元素脱离文档流
css position: absolute、relative详解
10-30
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
详解iOS中position:fixed吸底时的滑动出现抖动的解决方案
08-26
第一种解决方案是使用 position:absolute 和 overflow-y:scroll; 来实现滑动效果。在这种方法中，需要将 header 和 footer 设置为 position:fixed，并设置中间滑动部分的 padding-top 和 padding-bottom，以便在上下...
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方...
详解css粘性定位position：sticky问题采坑
12-14
position: absolute; top: 100px; left: 0; width: 100%; height: 2px; background-color: red; } #sticky-nav { position: sticky; top: 100px; width: 100%; height: 80px; background-color: ...
详解IE6中的position：fixed问题与随滚动条滚动的效果
10-19
具体方法是使用position: absolute; 配合一个javascript表达式，通过计算确保元素相对于视窗的位置保持不变。 在解决IE6中position: fixed的问题时，文章中提到了几个关键点： 1. 使用_position: absolute; 来确保...
CSS属性详解——position:absolute
Wod_7的博客
06-04 1万+
绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。
position之absolute
lbs311709000127的博客
01-18 319
position：absolute 作用：使元素脱离常规流 特点： 脱离常规流 用百分比设置元素宽和高的时候要注意是按照谁的百分比设置的------最近定位祖先元素 如果没有最近定位祖先元素，会默认body是 z-index可以控制堆叠顺序 案例一（1，4） html <body> <div class="box">A...
position属性：absolute
assassin_0302的博客
06-18 4803
absolute属性会导致元素脱离文档流 eg：当没有加入position: absolute属性时，body元素有宽高 加上：position: absolute; body的高度为0；
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
csgojingyu的博客
10-21 1万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
position
qq_28923283的博客
05-13 595
position：absolute这个是绝对定位； 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如： 当1固定了位置。1的样式
position：absolute绝对定位的使用
一个小白的成长历程
12-03 4498
position定位的使用 相对定位（relative）：相对于块级元素（或行内块）自身位置进行定位； 绝对定位（absolute）：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）； 绝对定位的偏移量的top/bottom,left/right是相对于已设置relative的祖先元素 1.有定义偏移量的值（top/bottom,left/right） 是相对父元素的相对于父级元素的占位区定位（包含padding区域） 2.没有定义偏移量的值（top/bottom,left/ri
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

big_matster

您的鼓励，是给予我最大的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值