Css定位position怎么用

发布时间:2022-03-10 10:33:46 作者:小新
来源:亿速云 阅读:143

这篇文章给大家分享的是有关Css定位position怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式。position取值:

static 默认定位方式

relative 相对定位。相对于原来的位置,但是原来的位置仍然保留。理解为棋盘上棋子的排列:

棋子从左往右排列,达到边缘时移到下一行。棋子排列方式是由display决定。样式属性display的值为block的元素自动放在下一行(默认),而为inline的元素自动放在同一行,位于前一个元素后面。对象不可层叠,依据leftrighttopbottom等属性在正常文档流中偏移自身位置

absolute 绝对定位。相对于最近的非标准流定位,原来的位置消失,被后边元素的位置所顶替。

这个属性是相对于参照物,能够指定元素的矩形局域相对于父元素区域的位置。

将被赋予此定位方法的对象从文档流中拖出,使用leftrighttop bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值。

偏移属性值:

left:左边的位置偏移

right:右边的位置偏移

top:顶部的位置偏移

bottom:底部的位置偏移

relative 相对定位

absolute 绝对定位

感谢各位的阅读!关于“Css定位position怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 定位(position)
  2. CSS定位position属性示例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css position

上一篇:微信小程序API转发消息功能怎么实现

下一篇:轻芒杂志小程序开发需要具备哪些功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》