Question

我正在尝试将标题图像固定在我的网页屏幕顶部，并允许内容填充的div在我向下滚动时滚动图像。

问题在于屏幕顶部的图像是响应性的，并且我似乎无法在没有图像扭曲，或复制或缩放到图像的一部分的情况下使两个方面一起工作！

以下是我最接近的解决方案：

HTML

<body>

  <div id="header">
    <img src="http://placehold.it/960x290" width="100%">
  </div>

  <div id="main">

    <table>
      <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
      </tr>
      <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
      </tr>
      <tr>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
      </tr>
    </table>

  </div>

</body>

CSS

 * {
   margin: 0;
   padding: 0;
 }

 #header {
   position: fixed;
   top: 0;
   left: 0;
   min-width: 100%;
   min-height: 100%;
 }

 #main {
   font-family: 'Hind', sans-serif;
   color: black;
   text-align: center;
   font-size: 2.5vw;
 }

Answer 1

将position:relative;添加到main，然后为其提供z-index值。

点击此处的小提琴：https://jsfiddle.net/umpn66vd/

Answer 2

添加'margin-top：25vw;'并删除'position：relative;'这解决了它：

where  client  =  'STORE A'

* { 
  margin: 0; 
  padding: 0; 
}

#header{
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
} 

#main {
  margin-top:25vw;
  font-family:'Hind', sans-serif;
  background-color:white;
  color:black;
  text-align:center;
  font-size:2.5vw;
  position:relative;
  z-index: 2;
}

Answer 3

问题的根源在img标记和#main元素中。

您的img代码的固定宽度为1005px。这有效地使您的布局不响应。要解决此问题，我将您的图片作为background的{{1}}属性。

您的#header有一个简单的问题。为了使其在main的{{1}}属性上方可见，我添加了fixed。为了演示滚动，我只是添加了高度和填充，为了测试目的，你可以随时删除这样的样式。

如果您有任何问题，请与我们联系。

＆＃13;

#header

＆＃13;

background-color: transparent

＆＃13;

获取div以滚动标题div图像

3 个答案: