menus-box问题

老师，请问这里子绝父相为什么只给这个盒子设置了绝对定位，没有给父设置相对定位？而且效果也很正常呢？

Cynthia4660559 2021-12-05

收起

1回答

好帮手慕慕子 2021-12-05 10:10:41

同学你好，因为“子绝父相” 这里的父并不单单是指父元素，也表示祖辈元素，代码中给menus-box的祖辈元素banner-nav盒子设置了相对定位，所以menus-box会参考banner-nav元素进行绝对定位，实现布局效果。如下图所示：

祝学习愉快~

收起回答

提问者 Cynthia4660559 #1

可是老师上课的课件里，并没有给menus-box的祖辈元素banner-nav设置任何相对定位，相反，他给banner-nav设置的是绝对定位并且令他居中。拥有相对定位的是banner标签。而banner标签我们并没有给它定义宽度，这个时候我的menus-box如果设置绝对定位不应该是以整个banner来定位的吗？为什么还会紧贴着左侧nav呢？

我完全跟着老师上课的步骤来的，同样是只有banner设置了相对定位，banner-nav设置了绝对定位。但是在我给menus-box设置了绝对定位并且设置left：296px以后效果仍旧是正确的，我不太理解这是为什么。

.banner {
position: relative;
}
.banner img {
width: 100%;
min-width: 1152px;
/* 图片有时候会和盒子之间有一些缝隙，让左边的nav多出来一些，这时候可以使用vertical-align来让图片居中 */
vertical-align: middle;
}
.banner .center-wrap {
position: absolute;
top: 0;
width: 1152px;
left: 50%;
margin-left: -576px;
/* 这里的100%高度绝对不能省略，因为如果省略了，它的height就是0 */
/* 那么它的子盒子设置16.6%就没有意义了 */
height: 100%;
}
.banner .center-wrap .banner-nav {
height: 100%;
}
.banner .center-wrap .banner-nav>ul {
height: 100%;
}
.banner .center-wrap .banner-nav>ul>li {
height: 16.66%;
width: 296px;
opacity: 0.5;
background: #1C1F21;;
position: relative;
box-sizing: border-box;
border-bottom: 1px solid hsla(0, 22%, 91%, 0.37);
}
.banner .center-wrap .banner-nav .menus-box .menu {
display: none;
position: absolute;
width: 356px;
height: 100%;
left: 296px;
top: 0;
background-color: rgba(0, 0, 0, .63);
padding: 16px;
/* 因为高度是100%没办法减去padding，所以使用border box */
box-sizing: border-box;
}

2021-12-05 18:36:29

好帮手慕慕子回复提问者 Cynthia4660559 #2

同学你好，对于你的问题解答如下：
1、非常抱歉，老师是以最终源码展示的效果为基础解答的，以后会更加注意一点。
2、“子绝父相”只是一个推荐的代码实现思路，并不是固定的，必须要这样设置。
可以了解下绝对定位参考定位的原理，如下：
设置了绝对定位的元素，会参考离它最近的设置了定位属性（static除外）的祖辈元素进行定位。
代码中，banner-nav是离menus-box最近，并设置了定位属性的祖辈元素，所以menu-box会参考banner-nav进行定位，所以设置left:296px;后效果是对的。
祝学习愉快~

2021-12-06 11:01:27