关于前端:css-子元素相对父元素进行定位

42次阅读

共计 534 个字符,预计需要花费 2 分钟才能阅读完成。

解决方案

  • 代码及成果

  • 原理

    • 浏览器渲染 html,是有文档流的说法的,块级元素换行渲染,行内元素行内渲染,在这里,两个 div 都是块级元素,一个父,一个子, 失常来说的渲染后果是父元素在浏览器左上角,子元素在父元素的左上角 。如果咱们要对子元素绝对父元素进行定位,就要用到 position 属性。

      属性值 形容
      absolute 生成相对定位的元素,绝对于 static 定位以外的第一个父元素进行定位
      relative 生成绝对定位的元素, 绝对于其失常地位进行定位
    • 咱们晓得,要应用绝对于父元素的定位,必定要应用 absolute,为什么间接应用 absolute 不起作用?因为应用 absolute 绝对于父元素定位,对父元素有一个要求,就是父元素的 position 不能是 static,如果父元素的 position 是 static 那么就持续向上查找元素,直到找不 position 不为 static 的元素,对这个元素进行绝对定位,所以,须要将父元素的 position 设置为 relative,这样做是没有影响的,因为,relative 只是绝对于失常地位进行定位,失常地位就是所谓的文档流默认的输入地位,如果咱们设置了 position 为 relative 而不设置偏移量 x,y,那就相当于父元素的地位是没有变动的。
正文完
 0