CSS中position属性详解

css中positionposition是设定元素的定位类型,它有absolute(position)、relative(相对定位)、position(position定位,默认值)、fixed(固定定位)四种参数。

static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、position、left 或 right 声明)。

relative:位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。

absolute:位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。

fixed:位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

立即学习“前端免费学习笔记(深入)”;

示例

使用position属性定位

元素,代码如下
  1. nbsp;html> <span class="pun">【创想鸟】</span> h2{position:absolute;left:100px;top:150px;}

    这是一个绝对定位了的标题

    用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.

登录后复制

以上就是CSS中position属性详解的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    CSS position属性中:fixed怎么用的

    2025-3-29 18:33:20

    编程技术

    CSS样式-如何清除元素浮动?

    2025-3-29 18:34:08

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索