设置position:absolute且bottom:0的元素未贴底，需给body加position:relative？

问题 #

作为编程新手，我想让蜜蜂图片贴在页面底部（body的底部），给它设置了position:absolute和bottom:0，但不给body设置position:relative就无法生效。根据所学，当没有非static定位的父元素时，绝对定位元素应自动相对body定位，为何此处不生效？

HTML代码 #

<body>
 <img src="https://media.npr.org/assets/img/2018/06/07/gettyimages-200415242-001_slide-d26f3af782b697f15ceebe2f7c380c0e545dd47b.jpg" alt="" class="test-bee">

    <div class="container">
        <div class="main">
            <div class="info">
                <h1>10,000+ of our users love our products.</h1>
                <p>We only provide great products combined with excellent customer service.
                    See what our satisfied customers are saying about our services.</p>
            </div>
            <div class="rates">
                <div class="rate-container">
                    <div class="star-container">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                    </div>
                    <p class="review">Rated 5 Stars in Reviews</p>
                </div>
                <div class="rate-container">
                    <div class="star-container">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                    </div>
                    <p class="review">Rated 5 Stars in Report Guru</p>
                </div>
                <div class="rate-container">
                    <div class="star-container">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                        <img src="./images/icon-star.svg" alt="">
                    </div>
                    <p class="review">Rated 5 Stars in BestTech</p>
                </div>

            </div>
        </div>
        <section class="testemonies">
            <div class="testemony-card">
                <div class="user-info">
                    <div class="img-container">
                        <img src="./images/image-colton.jpg" alt="">
                    </div>
                    <div class="user-name-status">

                        <p class="user-name">colton smith </p>
                        <p class="status"><span>verified buyer</span></p>

                    </div>
                </div>
                <p class="testimony">"We needed the same printed design as the one we had ordered a week prior.
                    Not only did they find the original order, but we also received it in time.
                    Excellent!"</p>
            </div>
            <div class="testemony-card">
                <div class="user-info">
                    <div class="img-container">
                        <img src="./images/image-irene.jpg" alt="">
                    </div>
                    <div class="user-name-status">
                        <p class="user-name">irene roberts </p>
                        <p class="status"><span>verified buyer</span></p>
                    </div>
                </div>
                <p class="testimony">

                    "Customer service is always excellent and very quick turn around. Completely
                    delighted with the simplicity of the purchase and the speed of delivery."</p>
            </div>
            <div class="testemony-card">
                <div class="user-info">
                    <div class="img-container">
                        <img src="./images/image-anne.jpg" alt="">
                    </div>
                    <div class="user-name-status">
                        <p class="user-name">anne wallace </p>
                        <p class="status"><span>verified buyer</span></p>
                    </div>
                </div>
                <p class="testimony">

                    "Put an order with this company and can only praise them for the very high
                    standard. Will definitely use them again and recommend them to everyone!"</p>
            </div>

        </section>
    </div>


</body>

CSS代码 #

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

:root {
    --Very-Dark-Magenta: hsl(300, 43%, 22%);
    --Soft-Pink: hsl(333, 80%, 67%);
    --Dark-Grayish-Magenta: hsl(303, 10%, 53%);
    --Light-Grayish-Magenta: hsl(300, 24%, 96%);
    --White: hsl(0, 0%, 100%);
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: 'League Spartan', sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 5px solid red; */
    padding: 1em;
    position: relative; /*why do i need this relative? the bottom image should stick to the bottom by default cause the body is the first one that had position relative, but without it it doesnt stick*/

}

.pattern {
    display: none;
}

.test-bee {
    width: 200px;
    position: absolute;
    bottom: 0px;
}

.bottom-mobile, .top-mobile {
    display: block;
    position: absolute;
    
}

.top-mobile {
    top:0px;
}

.bottom-mobile {
    bottom: 0px;
}

.container {
    height: 100%;
    /* border: 5px solid green; */
    margin: 3em 0px;
    
}

.main {
    text-align: center;
   margin-bottom: 3em;
}

.info h1 {
    margin: 0px auto;
    line-height: 0.8em;
    margin-bottom: 1em;
    margin: 1em 2em;
    color: var(--Very-Dark-Magenta)

}

.info {
    line-height: 1.3em;
    margin-bottom: 2.5em;
}

.rate-container {
    background-color: var(--Light-Grayish-Magenta);
    padding: 1em 2em;
    margin-bottom: 1em;
    border-radius: 0.4em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    color: var(--Very-Dark-Magenta);
    font-weight: bold;
    
}

.testemonies {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.testemony-card {
    background-color: var(--Very-Dark-Magenta);
    border-radius: 0.4em;
    color: white;
    padding: 2em;
    line-height: 1.2em;
    
    
}

.img-container {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    overflow: hidden;
}

.img-container img {
    height: 100%;
    width: 100%;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1em;
    text-transform: capitalize;
    margin-bottom: 1em;
}

.user-name-status p span{
    color:var(--Soft-Pink)
}

解答 #

问题出在绝对定位元素的包含块规则，以及你给body设置的样式组合：

1. 包含块的真实规则：当没有任何非static定位的祖先元素时，绝对定位元素的包含块是初始包含块（即浏览器视口），而非body——这是很多新手容易误解的知识点。
2. padding与box-sizing的影响：你的body设置了padding:1em和box-sizing:border-box，这意味着body的min-height:100vh已经包含了上下内边距。此时body的内容区域底部距离视口底部还有1em的padding空间。
3. 定位差异：
   • 不给body加position:relative时，.test-bee相对视口定位，bottom:0会让它贴在视口最底部，这个位置位于body的padding-bottom区域之外，看起来就像没贴到body底部。
   • 给body加position:relative后，.test-bee的包含块变为body，bottom:0会相对body的内容区域底部（padding的内边缘）定位，自然就贴到了你预期的body底部位置。

内容的提问来源于stack exchange，提问作者Amir Noyman