weixin_45735939
爱法斗学编程
采纳率72.7%
2019-10-14 22:06

关于相对定位和绝对定位嵌套的问题,求解答

10

1简单描述下我的问题,新手,刚学定位块。
遇到了一个问题:
父元素的定位方式:relative或者absolute
子元素的定位方式:relative或者absolute

按照教程里说的,一般父元素设置为relative,子元素为absolute

但是这是为什么呢?
这是正常情况显示:
图片说明

我在实际中实验了一下
如果父元素为absolute或者子元素为relative,就变成下面这样了。子元素跑到下面了。我前后设置的子元素bottom都是0.
图片说明
这前后的差距让我很不解。w3school还有网上这两个定位的概念我都很清楚了,但是没人讲过这种嵌套的时候会是什么情况。

希望懂的朋友给解答一下,不甚感谢。10C币奉上。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • jslang 天际的海浪 2年前

    position的定位方式有4种 static/relative/absolute/fixed;
    fixed 是相对于浏览器窗口定位的,先不谈。
    static 是元素的位置随常规文档流排列,不可随意移动。也是position的默认值。
    relative 是参照元素在常规文档流中的位置,通过top,right,bottom,left这4个定位进行偏移。
    absolute 是元素脱离常规文档流,偏移属性参照的是离自身最近的非static定位祖先元素,如果没有非static定位的祖先元素,则一直回溯到body元素

    当父元素的定位方式是 relative或absolute或fixed,子元素定位方式是absolute,bottom是0
    表示子元素的底边与父元素的底边距离为0。

    如果子元素为relative,则子元素只与它在父元素的常规文档流中的位置有关系,与父元素的定位方式没关系,不论父元素是什么定位方式,子元素的位置都不受影响。
    如果没有设置position,依照常规文档流中的位置文字本就是在图片的下面。
    你子元素定位方式是relative,bottom是0,表示的是元素在常规文档流中的位置向下偏移0px,也就是没有移动。

    点赞 评论 复制链接分享
  • zqbnqsdsmd zqbnqsdsmd 2年前
    点赞 评论 复制链接分享

相关推荐