绝对定位

最新推荐文章于 2022-06-20 16:50:13 发布
最新推荐文章于 2022-06-20 16:50:13 发布
阅读量151 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxwmb11/article/details/115303666
版权
本文详细介绍了CSS中的绝对定位特性，包括开启定位后元素位置的变化、脱离文档流、元素性质转换、层级提升以及坐标原点的确定。绝对定位是相对于最近的已定位祖先元素进行定位，若无定位祖先则参照根元素html。理解这些概念对于前端布局至关重要。
摘要由CSDN通过智能技术生成

position absolute
开启元素的绝对定位
绝对定位特点
1.开启绝对定位 不设置偏移量 元素位置不会发生变化
2.开启绝对定位，元素会从文档流中脱离
3.绝对定位会改变元素性质，行内会变成块，宽高会被撑开
4.绝对定位会使元素层级提高
5.坐标原点
绝对定位是相对于包含块进行定位的
包含块：
1.文档流元素：离当前元素最近的祖先块元素
2.绝对定位情况：
包含快是离他最近的开启了定位的祖先元素
只要position不是static就是开启了
如果所有的祖先元素都没开启，就看根元素就是包含块
html（根元素，包含块）

我想我明白
关注
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
绝对定位元素被遮挡的解决方法
09-25
在网页设计中，CSS的定位属性是核心知识点之一，其中绝对定位是一种常见的布局手段。使用绝对定位可以将元素放置在相对于最近已定位（非static）祖先元素的指定位置。然而，在实际应用中，绝对定位的元素有时会遇到...
网页布局绝对定位(position)轻松简单
12-10
要想控制好层的绝对定位，只要理解CSS中关于定位（position）的定义，一切就会变得轻松简单。 使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为...
css---绝对定位
weixin_46218101的博客
09-30 258
前端入门笔记之css（6） 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。 绝对定位的语法：{position: absolute} 1.脱离标准流：绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。 2.原来的位置不会保留 3.绝对定位是根据有定位的父级元素进行定位 4.如果父级元素
定位(绝对定位)
m0_67176957的博客
04-03 455
绝对定位 当元素position属性值设置为absolute时，则 开启了元素的绝对定位 position:absolute;(开启绝对定位) 绝对定位的特点 1 开启绝对定位后，如果不设置偏移量，元素的位 置不会发生变化 2开启绝对定位后，元素会从文档流中脱离 3绝对定位会改变元素的性质，行内变成块，块的宽 高被内容撑开 4绝对定位会使元素提升一个层级 包含块(containing block) 正常情况下: 包含块就是离当前元素最近的...
css中的绝对定位
fighting_dream的博客
01-24 5954
今天来讲css中绝对定位： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的 {position:absolute;} 1. 情况一：没有父盒子，即父盒子就是浏览器 html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
CSS 绝对定位
成大事者，须综理密微。
01-02 1105
CSS 绝对定位 CSS 相对定位 CSS 浮动 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流
CSS绝对定位
weixin_52629592的博客
06-20 8986
当元素的position设置为absolute时,则开启了元素的绝对定位用法: position: absolute;绝对定位的特点:与相对定位一样.开启了绝对定位以后,如果不设置偏移量,元素的位置不会发生任何改变开启绝对定位之后,元素会从原有的文档流中脱离.只是相对于它的包含块定位,包含块可能是文档流中的另一个元素或者是初始包含块绝对定位会改变元素的性质.行内元素变为块元素,块元素的宽度被内容撑开(即块元素中原有内容有多宽,开启绝对定位之后的块元素就有多宽)绝对定位会使元素提升一个层级下面我们来看一个栗子
14.绝对定位
前端学习笔记
04-23 419
绝对定位脱离标准流1.脱标后不再区分行内元素/块级元素了，故行内元素span等不需要设置display:block就可以设置宽高 2.top/bottom:100px;是相对于当前页面左上角/左下角向下/上移动100px.left/right同理参考点绝对定位参考点，如果用top描述，那就是当前页面左上角，如果用bottom描述，那就是浏览器首屏页面的左下角。故当卷动页面时，定位后的元素会消失在页...
绝对定位Position：absolute
不要怕
12-19 3897
使用步骤：        将需要移动的元素position属性设置为absolute。设置元素要移动的位置（top，right，bottom，left）     注意：        1.绝对定位元素会脱离文档流。        2.绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。        3.绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然...
相对定位，绝对定位
旭之PHP学习记录
01-30 1339
绝对定位是相对于父标签决定位置，一般用于相对定位标签里面，JS特效经常用到。 相对定位是相对于上一个相对定位的。一般用于浮动定位标签里面，一般跟绝对定位配合使用。 浮动定位才是常用的。 看例子： 以下只说id名代表div 绝对定位：position:absolute 如果bq1（绝对定位）外面没有div等父标签，bq1会以body为父标签。左边距距body 10像素，上边距距bod
position属性
oHayHay的博客
07-13 572
//相对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>相对定位</title> <style type="text/css"> body{margin:0; padding: 0} .box1{background-color: red;height: 80px;po
GPS定位原理：绝对定位与相对定位解析
"本资源主要探讨了GPS卫星定位的基本原理，特别是绝对定位和相对定位的概念、方法以及精度评价。" GPS绝对定位与相对定位是卫星导航系统中的两种关键定位技术，广泛应用于地理信息系统、测绘、交通运输等多个领域。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值