Question

我有container，其中有两个绝对定位divs。

第一个div包含文字+按钮。第二个div包含一个带有汽车的.png

我的网站是响应式的，所以当窗口变小时文本会调整大小，这让我陷入困境。在一定的宽度，文字分成两行，而不是一行，这在我的绝对定位的div之间创造了更多的空间，弄乱了一点布局（汽车不完全在路上）。

1）http://prntscr.com/9e0bq4（窗口宽度足以让文字保持在一行中）
2）http://prntscr.com/9e0c2y（窗口宽度较小，文本分为两行）

我无法将位置更改为相对或固定，因为它会破坏我的动画而我无法使字体变小以适应在任何分辨率的一行中，因为宽度越小，读取就越难。

如何使#cars＆＃34;更绝对＆＃34;并忽略#header也是绝对的？

这是我的代码：
HTML

<section id="home" >    // container    
    <div id="home1inner">   // a container inside it with a bigger height, so it allow scrolling
        <div id="header">
            *way too much to code to insert it all here*
        </div>

        <img id="cars" src="images/cars.png" />
    </div>      
</section>

CSS

   #home {

    position: relative;
    width: calc(100% + 25px);
    overflow-y: scroll;
    background-image: url('images/movie_6.jpg');
    background-repeat: no-repeat;
    background-position: center;
    height: 690px;
    margin-top: 40px;       
    }

    #home1inner {
        height: 1490px;
    }

    #header{
    width: 75%;
    position: absolute;
    left: 50%;
    margin-left: -37.5%;
    }

    #cars {
    position: absolute;
    height: 690px;
    bottom: -500px;
    margin-left: -300px;
    }

更新：这里是http://jsfiddle.net/denea/2oexep8u/8/embedded/result/（滚动并调整窗口大小，汽车保持相同的高度），使用相同的代码，在调整窗口大小时工作正常。虽然当我在本地文件上调整窗口大小时cars正在向下移动。这里的代码和我没有发现的jsfiddle有什么区别吗？

Answer 1

精确的窗口宽度（如果在consol中尝试这个：window.innerWidth）

现在使用媒体查询： @media only screen and（max-width：992px）{your #car and #header style}

将992宽度更改为您遇到麻烦的屏幕：）

重叠两个绝对div

1 个答案: