html - 调整窗口大小时将元素推离屏幕而不是挤压它们

Question

我想在缩小窗口时将我的元素推离屏幕，而不是将它们挤压在一起。非常类似于此页面的顶部(带文本的顶部图像)- http://www.kirastokes.com/schedule/ .如果您使窗口变小，则图像的一部分会移出屏幕，这样您就可以看到文本框。页面上的元素并没有把所有东西都压在一起，而是有点偏移了。我该怎么做？

我的 jsfiddle:http://jsfiddle.net/rhe9jtqw/

#top-section-intro-container
{
    height:700px;
    position:relative;
}

#top-section-intro-image
{    
    position:absolute;
    left:0;
    top:0;
        width: 892px;
    height: 650px;
}
#top-section-intro-text-container
{

        z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;

    background-color:white;
    width: 558px;
    height: 480px;
    left: 800px;
    top: 78px;
}
.top-section-intro-text {
  left: 0px;
    padding-top: 144px;
    padding-left:95px;
    width: 530px;
    height: 285px;
    font-size:18px;
			font-family: lato;
    font-style: normal;
	text-align:justify;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 24px;
    color: #255957;
}

<div id="top-section-intro-container">
    <img id="top-section-intro-image" src="https://www.outsideonline.com/sites/default/files/styles/full-page/public/2018/05/01/alaska-trees-forest-fog-richard-bos_h.jpg?itok=eOaGR4uY"/>
    <div id="top-section-intro-text-container">
    <p class="top-section-intro-text">
        
A forest is a large area dominated by trees.[1] Hundreds of more precise definitions of forest are used throughout the world, incorporating factors such as tree density, tree height, land use, legal standing and ecological function.[2][3][4] According to the widely used[5][6] Food and Agriculture Organization definition, forests covered 4 billion hectares (9.9×109 acres) (15 million square miles) or approximately 30 percent of the world's land area in 2006. 
</p>
    </div>
</div>

Answer 1

您可以尝试为此目的使用 css 媒体查询。

假设您希望在特定宽度(例如 1000 像素)之前保持页面响应，您可以为其定义媒体查询。

.myTopNav {
   display: flex;
}

@media (max-width: 1000px) {
   .myTopNav {
      display: initial;
      position:absolute;
      left:0;
      top:0;
   }
}

所以类 myTopNav 只会被宽度为 1000px 或更小的覆盖。

要了解更多信息，请查看此处:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp