专栏首页数据结构笔记前端:CSS定位position

前端:CSS定位position

position有四个值:

  • static:默认值。设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
  • relative:设置为 relative 的元素的 top、bottom、left和 right都是相对于原来的位置。元素仍然占据原来在页面流中的位置。
  • absolute:设置为 absolute 的元素的 top、bottom、left和 right相对于最近的定位不是 static的父元素。如果所有父元素定位都是 static,则相对于 window进行定位。元素不占据页面流中的位置。
  • fixed:设置为 fixed 的元素,相对于浏览器窗口进行定位。元素不再占据页面流中的位置。

需要注意的是,设置了 left的元素不能再设置 right,设置了 top的元素不能再设置 bottom,反过来也是一样。如果同时设置的话,left的优先级高于 right,top优先级高于 bottom(不论它们出现的位置如何)。

另外 left参考元素的左侧边,right参考元素的右侧边,top参考元素的上边,bottom参考元素的下边。

也就是说,如果元素的 position设置为 relative,left指的是元素的左侧边相对于原来的位置移动的距离。如果元素的 position设置为 absolute,left指的是元素的左侧边和最近定位不是 static的父元素的左侧边的距离。right、top和 bottom同理。

参考: position 的注意点与使用场景:https://blog.csdn.net/dhl879850/article/details/83057328

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django自定义user表

    需要注意的是我们自定义的表的表名必须是 auth_user ,而且必须有属性 is_active , is_staff , has_perm 和 has_mod...

    渔父歌
  • 操作系统:死锁的产生和处理

    预防死锁:通过设置一些限制条件,破坏产生死锁的四个必要条件的一个或多个,来预防发生死锁。预防死锁实现简单,但是往往因为限制条件太过严格,导致系统资源利用率和吞吐...

    渔父歌
  • JavaScript中 appendChild追加子节点无效的解决办法

    这其实是因为一个元素只能有一个父元素,上面这段代码试图将 btn添加到多个元素中。

    渔父歌
  • TextView的setCompoundDrawables和setCompoundDrawablesWithIntrinsicBounds的区别

    我们都只TextView支持设置文字和图片同时显示,通常会联想到两种方法,一种是直接设置drawableXXX(Left, Top, Right, Bottom...

    包子388321
  • python中yield\\send好处

    IT故事会
  • 最全Python内置函数

    判断真假,  True:真  ,  False:假,   把一个对象转换成bool值

    Wyc
  • python 配置文件读写

    将代码中的配置项抽取到配置文件中,修改配置时不需要涉及到代码修改,避免面对一堆令人抓狂的 magic number,极大的方便后期软件的维护。

    orientlu
  • python中上双互斥锁的线程执行流程

    skylark
  • 圆角与文本

    text-stroke:宽度 颜色; 描边,加上兼容性前缀 text-stroke-width: 宽度 text-stroke-color: 颜色

    踏浪
  • 如何在 Python 中使用断点调试

    实际上没人能一次就写出完美的代码,除了我。但是世界上只有一个我。 -- 林纳斯·托瓦兹(Linux 之父) 既然不是神,写代码自然免不了要修改。修改代码的过程被...

    Crossin先生

扫码关注云+社区

领取腾讯云代金券