V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pinews
V2EX  ›  设计

刚才发现之前的 position 白学了

  •  
  •   pinews · 2019-05-11 20:51:20 +08:00 · 7726 次点击
    这是一个创建于 2004 天前的主题,其中的信息可能已经有所发展或是发生改变。
    之前
    absolute 以 body 作为起点,然后用 top left 定位
    relative 把自身作为起点,然后用 top left 定位。
    当然我知道不止如此,但用的时候主要是这么用的。
    但今天看别人的下拉菜单时,完全颠覆了我认知,absolute 不用 topleftrightbottom (指 auto 而非 0 )的时候,竟然和 relative 很像还很好用。
    原因我网上搜了,还没看明白怎么回事
    20 条回复    2019-05-13 15:50:01 +08:00
    83f420984
        1
    83f420984  
       2019-05-11 21:04:59 +08:00 via iPhone
    absolute 的元素的位置相对于最近的已定位祖先元素进行定位的,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
    shenyu1996
        2
    shenyu1996  
       2019-05-11 21:08:51 +08:00 via Android
    还有全部 Zhi
    shenyu1996
        3
    shenyu1996  
       2019-05-11 21:10:27 +08:00 via Android
    手滑发出去了 还有全部置 0 撑满页面这种骚操作
    pinews
        4
    pinews  
    OP
       2019-05-11 22:34:30 +08:00
    @shenyu1996 是啊

    @83f420984 什么是包含块?
    qdxr
        5
    qdxr  
       2019-05-12 00:23:33 +08:00 via Android
    @pinews 看下 mdn 上关于 position 和 containing box 的内容估计还会被惊讶一下。我有次调嵌套模态框样式的时候,也重新认识了一下 position
    birdrally
        6
    birdrally  
       2019-05-12 01:16:20 +08:00 via iPhone
    你不发例子,在这干说
    hoythan
        7
    hoythan  
       2019-05-12 01:59:43 +08:00
    张鑫旭有对 这个参数的详细视频介绍,你看完世界观会变得。
    rabbbit
        8
    rabbbit  
       2019-05-12 04:13:25 +08:00   ❤️ 1
    position 中造成奇怪现象的常见原因:
    1 如果同时拥有 top:0 bottom:0 和 height 和 margin: auto, 子元素会飞到中间去自动垂直居中.原因是上下两边自动被 margin-top 和 margin-bottom 补上了.这也是一种居中方法.
    2 如果 fixed 元素的祖先元素有 transform 属性, fixed 元素会相对于这个祖先元素定位,而不是视口.
    3 拥有 absolute/fixed 的元素会生成 BFC,可以理解成个盒子,内外互不影响.常见的影响有里面的 margin 不会穿透了, float 元素把容器撑了起来.
    4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于父元素 padding + width 计算.
    5 position 会改变层叠上下文, 如果两个元素压在一起的话会改变顺序.
    rabbbit
        9
    rabbbit  
       2019-05-12 04:23:15 +08:00   ❤️ 1
    至于为什么 auto 的时候位置没变, MDN 说的很清楚, 没有的时候就不动这个元素
    ```
    对于绝对定位元素,元素将忽略此属性已 bottom 属性为准,如果此时设置 height: auto,将基于内容需要的高度设置高度;如果 bottom 也为 auto 的话,元素的垂直位置就是它假如作为静态(即 static)元素时该在的位置。
    ```

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/top
    rabbbit
        10
    rabbbit  
       2019-05-12 04:27:15 +08:00   ❤️ 1
    4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于父元素 padding + width 计算.
    -->
    4 如果子元素是 absolute 元素, 且宽度值为百分比. 这个百分比值相对于包含块的 padding + width 计算.
    hackyuan
        11
    hackyuan  
       2019-05-12 08:36:56 +08:00 via Android   ❤️ 1
    作为过来人,友情提示不要折腾 CSS,能用就行,你专心学三四个月 JavaScript 可以和面试官吹牛逼了,三四个月 CSS 你还是一脸懵逼。
    pinews
        12
    pinews  
    OP
       2019-05-12 08:46:10 +08:00
    @rabbbit 是的之前那个例子你发的文章我看了对此说的很清楚,如果不设值,则原地不动。
    @birdrally 例子你随便找一个 css 框架在处理下拉列表的时候,这么处理的不少。
    rabbbit
        13
    rabbbit  
       2019-05-12 09:44:24 +08:00   ❤️ 1
    lqzhgood
        14
    lqzhgood  
       2019-05-12 10:44:34 +08:00
    CSS 就是一个 奇淫技巧 支撑的 “语言”。
    falcon05
        15
    falcon05  
       2019-05-12 10:46:38 +08:00 via iPhone
    css 就是依靠经验和积累
    mostkia
        16
    mostkia  
       2019-05-12 14:54:25 +08:00
    你使用 position:absolute,如果不对父元素也做定位,那它有可能会跑到外太空去(其实就是跑到更上一级去寻找定有 postiton 定位的容器了)。css 其实难就难在太过松散,没什么规律,很多规则又互相影响,不踩一些坑没法写好的。
    azh7138m
        17
    azh7138m  
       2019-05-12 17:33:54 +08:00
    @lqzhgood 对用户来说,大部分时候依赖经验,但是标准是非常详细的,绝大部分时候其表现都是符合标准的。

    @hackyuan 3、4 个月看 CS 基础了,没 CS 基础基本就是被摩擦的命运。
    pinews
        18
    pinews  
    OP
       2019-05-12 18:59:47 +08:00
    @azh7138m 标准是一般好的,但有时也是垃圾,明明 IE 先出的,firefox 非要换个名字,说自己是标准

    @lqzhgood web 是开放的,对后来者友好,新来者努力开拓却无法转化成利益,就不想开发了,所以今天你做主,明天我当家,随缘。
    wtf12138
        19
    wtf12138  
       2019-05-13 10:06:58 +08:00   ❤️ 1
    absolute 什么时候相对于 body 了 你确定你学过 css 吗
    yhyh
        20
    yhyh  
       2019-05-13 15:50:01 +08:00
    额。absolute 是相对父元素(带有 relative 的元素) 绝对定位, 你认为是 body 是 body 最外层的元素
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3375 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:50 · PVG 18:50 · LAX 02:50 · JFK 05:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.