Question

我正在研究一个网站的原型：

http://www.paulgrantdesign.com/valcomp/index.php

我在中间有一个div，它将被固定在中间。它有一个给定的高度，所以在css我做了

#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}

根据需要，它位于中间。但是当窗口太小时，我不希望它覆盖它上面的内容。我可以设置它，以便窗口顶部和此顶部之间始终保持最小距离吗？

Answer 1

可能你可以像这样使用媒体查询：

@media only screen
and (min-width : 1000px) {
  #middle {
   color:red;
}
}

您可以阅读这些文章

http://css-tricks.com/6731-css-media-queries/，

http://css-tricks.com/6206-resolution-specific-stylesheets/

Answer 2

把位置：相对于身体。这是第一步。我正试着......坚持...... 和底部 - 位置：绝对。有用！耶！

Answer 3

我通过更改你的html解决了你的问题：

<div id="container">
    <div id="top">
        <div id="topcontent">
            <p id="mobile">Mobile data collection</p>
            <p id="slogan">Collect. Send. That's it.</p>
        </div>
    </div>
    <div id="middle"></div>
</div>

然后改变你的css：

#container{
    width: 100%;
    position: absolute;
    min-height: 350px;
    bottom: 20%;
    top: 0;
}

#top {
    width: 825px;
    min-height: 250px;
    display: block;
    position: absolute;
    left: 50%;
    height: 50%;
    margin-left: -412px;
    overflow: auto;
    bottom: 250px;
}

#topcontent {
    width: 100%;
    position: absolute;
    bottom: 0;
}

...

#middle {
    height: 225px;
    width: 100%;
    background-color: #56a6c4;
    position: absolute;
    bottom: 0;
    margin-top: -112px;
    z-index: 100;
}

可能需要进行一些调整才能准确地得到它;尤其是#bottom div

Answer 4

您需要将属性z-index添加到元素#top和#bottom，并让它们低于z-index的{{1}}。

如何强制液体定位div在某一点停止移动？

4 个答案: