前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【原创】CSS中定位

【原创】CSS中定位

作者头像
零点
发布2023-03-03 20:47:32
2980
发布2023-03-03 20:47:32
举报
文章被收录于专栏:微科技微科技

1.文档流:

代码语言:javascript
复制
浏览器窗口,自上而下,自左到右元素的排班成为文档流

2.文档流和元素定位的关系:

代码语言:javascript
复制
由于文档流中每个元素都有固定的位置,为改变文档流的位置,或者隐藏元素在文档流中的物理空间。

3.元素定位的分类:

代码语言:javascript
复制
相对位置
绝对位置
固定位置

4.相对位置:

代码语言:javascript
复制
相对位置需要设置参照
position:relative属性将元素自身位置设为参照物。
如果一个元素设置了该属性
上下左右移动属性:
bottom(向上移动,即距离相对位置下端的距离)
top(向下移动,即距离相对位置上端的距离)
left(向右移动,即距离相对位置左端的距离)
right(向左移动,即距离相对位置右端的距离)
注意:属性值可以为负数
     相对位置不会改变原有元素的物理空间

5.绝对定位:

代码语言:javascript
复制
position: absolute;
参照物:
a.如果父类元素均未被定位,则以body为参照物(即body左上角点为参照物)
b.如果父辈被定位,则以最近的父辈为参照物(父辈的同级不能作为参照物)
设置方法:
a.设置父类元素为相对定位
b.设置自身为绝对定位
c.绝对定位元素,原有的物理空间不存在,即原有物理空间会被覆盖

6.固定定位:

代码语言:javascript
复制
position: fixed;
参照物:浏览器窗口
用于设置某个元素固定在浏览器窗口的某个位置,浏览器滚动时,该元素不跟随变动.
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档