4-2标签的定位

为啥说在menu-item没有 position:relative;之前元素是以menu-content为定位祖先元素吗？menu-content的position属性不是absolute吗？，元素不是应该以main为定位祖先元素吗？

qq_涟_0 2017-08-01

源自：项目：JS实现轮播特效 4-2 导航菜单样式

收起

2回答

qq_天天_66 回答被采纳获得+3积分 2017-08-01 13:14:52

你贴个代码上来，我不是很清楚你说的是什么？

你的意思是menu-item 和menu-content是兄弟元素，main是他们共同的祖先元素吗？

绝对定位的参照可以是祖先元素的相对定位和绝对定位

收起回答

qq_涟_0 提问者 #1

问题描述我又补充了一下，如图所示，main元素嵌套menu-content元素，menu-content嵌套menu-item元素，menu-item元素中有元素，这会main元素有 position:relative;但menu-item元素没有position属性，menu-content有position：absolute；元素有position：absolute；展现的效果也如图所示。然后老师说此时元素是以menu-content元素为参照，这我就不懂了，元素不是以最近的定位祖先元素元素为参照吗？也就是说应该以main元素为参照（因为它有position:relative），而不是以menu-content元素为参照（因为它的position为absolute；不是祖先元素）。我这么理解有错吗？

2017-08-01 15:58:39
qq_涟_0 提问者 #2

我懂了，只要父级元素=设置了position值（absolute或者relative），那么子元素的position都是以父级元素来定位的。

2017-08-01 16:01:04
OlafChou #3

如果元素有父元素，且他需要针对父元素的位置进行定位的话，那么父元素一定要设置position：relative；子级此时归父级管。如果我这句话是对的，你那句话的意思就是错的。

2017-09-01 06:45:09

点开查看后面2条评论

提问者 qq_涟_0 2017-09-01 10:03:25

 section.father{
            width: 100px;
            border:#000 1px solid;
            height:100px;
            background:#ccc;
            position:relative; //即使这句注释掉，son-son也会根据son定位
        }

        div.son{
             width: 50px;
            border:#000 1px solid;
            height:50px;
            background:#fff;
            position:absolute;
            left:10px;
            top:10px;
        }
        .son-son{
             width:20px;
            border:#000 1px solid;
            height:20px;
            background:#ccc;
            position:absolute;
             left:10px;
            top:10px;
        }
        *{
            margin:0;
            padding:0;
        }
        
         <section class="father">
        <div class="son">
            <div class="son-son"></div>
        </div>
    </section>

收起回答