Question

我是新手，我一直在努力定位文本和图像，如下图所示。如果我使用“相对”和“绝对”定位，则文本容器会将自身定位在页面的下一个内容上。像这样进行布局的最佳方法是什么？

Desktop Version

Mobile version

我之前是这样做的，如果您在其中打开Firefox，您应该会看到我的目标。知道为什么它不能在Chrome上运行。（如果您查看移动设备的尺寸，一切就像我想要的那样）

https://helaris.github.io/lns/

和代码在这里：https://github.com/helaris/lns

Answer 1

您可以使用z-index。您必须将图像放大。

Answer 2

设法使其如上图所示。不知道这是否是最简单的方法，但是否可行。

Codepen link

HTML-

>             <div class="container">
                <section class="welcome-section">
                    <div class="welcome-text-container">
                        <h1>Welcome to LNS</h1>
                        <p>We are priviliged to be able to teach you the Norwegian language,
                            and thereby open the doors to the society around you.
                            We aim to facilitate your transition to life here in Norway in a
                            smooth manner. A wise man once said:
                            Speak to a person in their language, and you speak to their heart.
                            We also pride ourselves in working on engaging and keeping you
                            involved in Stavanger life. We know that classroom courses will teach
                            you how to speak Norwegian, and we provide you just that!
                            <br>Welcome to class!</p>
                    </div>
                    <div>
                        <img src="images/welcome-image.jpg" alt="">
                    </div>
                </section>
            </div>

CSS：

    > body {
      background-color: #f5f5f5;
    }     

    .container {
            position: relative;
            max-width: 1200px;
            margin: 50px auto;
        }

        .container img {
            position: relative;
            width: 80%;
            height: 100%;
            right: -200px;
        }

        .welcome-text-container {
            z-index: 1;
            position: absolute;
            max-width: 380px;
            background-color: #fff;
            line-height: 1.9;
            text-align: left;
            padding: 1rem;
            bottom: 0;
        }


        .welcome-text-container h1 {
            font-family: 'Frank Ruhl Libre', serif;
            font-size: 2rem;
            font-weight: 400;
            padding: 1rem;
            border-bottom: 1px solid #a8bfff;
        }

        .welcome-text-container p {
          font-family: 'Montserrat', sans-serif;
            padding: 40px 5px 10px 5px;
            font-size: 16px;
        }

    @media screen and (max-width: 901px) {
      .welcome-section {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .welcome-text-container {
            position: relative;
            order: 2;
            bottom: 100px;
            margin: 0px 15px;
            max-width: 35rem;

        }


        .container img {
            order: 1;
            width: 100%;
            position: initial;
        }

        .welcome-text-container p {
            font-size: 0.9rem;
        }
    }

如何定位这样的文本和图像？

2 个答案: