Question

我的标题有一个小问题，我添加了一个媒体查询，当窗口宽度减小但它实际上与我的容器重叠时，它会使它更高。我尝试添加另一个媒体查询以降低容器的顶部位置，但它不起作用

＆＃13;

<DataGrid ItemsSource="{Binding Parts}"
                  Visibility="{Binding DatagridIsVisible, Converter={StaticResource BooleanToVisibilityInverseParameterConverter}}"
                  AutoGenerateColumns="False" 
                  Margin="0,0,0,44" 
                  FontSize="20" 
                  AlternationCount="2"
                  AlternatingRowBackground="WhiteSmoke"
                  CanUserAddRows="False">
  <DataGrid.Columns >
    <DataGridTextColumn  Header="Raw Data" 
                         Binding="{Binding RawData}">
        <DataGridTextColumn.CellStyle>
            <Style>
                <Setter Property="Border.BorderBrush" Value="Black"/>
                <Setter Property="Border.BorderThickness" Value="0 0 1 0"/>
            </Style>
        </DataGridTextColumn.CellStyle>
    </DataGridTextColumn>   
    <DataGridTextColumn  Header="Manufacturer" Binding="{Binding Manu}">
        <DataGridTextColumn.CellStyle>
            <Style>
                <Setter Property="Border.BorderBrush" Value="Black"/>
                <Setter Property="Border.BorderThickness" Value="0 0 1 0"/>
            </Style>
        </DataGridTextColumn.CellStyle>
    </DataGridTextColumn>       
  </DataGrid.Columns>
</DataGrid>

＆＃13;

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: black;
  background-position: center;
  height: 200px;
  color: white;
}

#menu li {
  display: inline;
}

@media screen and (max-width: 600px) {
  #menu li {
    display: block;
    margin: 30px;
  }
  header {
    height: 400px;
  }
  #container {
    position: absolute;
    top: 400px;
  }
}

#menu a {
  background-color: #00BFFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 40px 4px;
}

#menu a:hover {
  background-color: #0489B1;
}

h1,
h2,
nav {
  text-align: center;
  margin: 30px;
}

h3,
form,
footer {
  text-align: center;
}

#container {
  position: absolute;
  top: 200px;
  left: 0px;
}

.fig {
  display: block;
  margin: auto;
}

＆＃13;

Answer 1

将#container的基本样式属性移到媒体查询之上，现在媒体查询应该正确覆盖基本样式。

https://jsfiddle.net/Ltqsjhbz/2/

Answer 2

你的问题是媒体查询在普通的css样式之前被浏览器解析。只需将媒体查询放在页面底部即可。

当窗口宽度减小时，固定位置的标题与容器div重叠

2 个答案: