文章目录
  1. 1. defined
  2. 2. Main()
    1. 2.1. 脑图:
    2. 2.2. Notice
    3. 2.3. codepen实例
    4. 2.4. position和display相关
  3. 3. Reference

defined

关于position这个问题有时候遇到也有点说不出来的问题, 直接写个脑图加上例子, 直接进行演示了.

Main()

脑图:

css-position

Notice

  1. 只有static(default), 即未被定位的element不能用top,left...z-index, 这也是和relative的唯一区别
  2. abosulte不遵循自然流, 而且元素变成块级block, 自然流的元素会像水流一样自动朝上填充.
  3. 关于z-index, 一旦element被定位, 该z-index会自动变成更高的layer, 像搭积木一样.
  4. 自然流中块级元素若无宽度, 则会填满整行.
  5. position:fixed 参考的是viewpoint

codepen实例

发现以前就写过, 看来理解不深刻啊.

position和display相关

已有相关回答.

@Spudley
All elements that are position:absolute; are automatically treated as display:block, since that’s the only logical display mode for absolute positioning.

Reference

CSS定位方式 - 前端工程师手册

文章目录
  1. 1. defined
  2. 2. Main()
    1. 2.1. 脑图:
    2. 2.2. Notice
    3. 2.3. codepen实例
    4. 2.4. position和display相关
  3. 3. Reference