html - 我的 Div 不响应位置：绝对容器 Div 设置为位置：相对

问题描述

这应该相当简单，但是我很难理解为什么它不起作用。容器（logo-wrapper）内的 div（logo-and-text）不想使用绝对位置，而父级作为相对位置。如果我在 div 或文本中制作单个图像，它会起作用。

我试过设置容器的高度，将边距设置为零，在 chrome 开发工具中检查。

<section id="contact-me-section">
        <div id="contact-me-section-wrapper">
            <div id="have-a-question-wrapper">
                <h2 class="contact-h2">HAVE A QUESTION?</h2>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/location.png" alt="">
                    <p class="contact-p">Dayton, Ohio</p>
                </div>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/phone.png" alt="">
                    <p class="contact-p">( 937 ) 336-9359</p>
                </div>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/email.png" alt="">
                    <p class="contact-p">contact@ryanjthacker.com</p>
                </div>
            </div>
            <div id="logo-wrapper">
                <div id="logo-and-text">
                    <img src="images/logo.png" alt="">
                    <p>Copyright © 2019 Ryan Thacker - All rights reserved</p>
                </div>
            </div>
            <div id="connect-with-me-wrapper">
                <h2 class="contact-h2">CONNECT WITH ME</h2>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/facebook_white.png" alt="">
                    <p class="contact-p">Facebook</p>
                </div>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/linkedin_white.png" alt="">
                    <p class="contact-p">LinkedIn</p>
                </div>
                <div class="connect-with-me-image-wrapper">
                    <img class="contact-img" src="images/github_white.png" alt="">
                    <p class="contact-p">GitHub</p>
                </div>
            </div>
        </div>
    </section>

#contact-me-section {
    color: white;
    background-color: black;
    height: auto;
    width:100%;
}

#contact-me-section-wrapper {
    display: flex;
    text-align: center;
    justify-content: center;
}

#have-a-question-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
}

#logo-wrapper {
    margin-left: 150px;
    margin-right: 150px;
    position: relative;
    height: 100%;
}

#logo-and-text {
    position: absolute;
    bottom: 0;
}

#logo-wrapper img {
    width: 116px;
    margin: 10px;
}

#connect-with-me-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
}

.contact-h2 {
    font-size: 17px;
    margin: 20px;
    padding-top: 60px;
    padding-bottom: 30px;
    text-align: left;
}

.contact-p {
    color: #989898;
    margin-top:auto;
    margin-bottom:auto;
    font-size: 15px;
}

.contact-img {
    width: 60px;
    margin: 20px;
}

.connect-with-me-image-wrapper {
    display: flex;
    flex-direction: row;
}

标签： htmlcss

html - 我的 Div 不响应位置：绝对容器 Div 设置为位置：相对

问题描述

解决方案

推荐阅读