Question

我正在尝试使用具有固定位置的顶级容器创建一个网站，在CSS中提供id position:fixed;。但是，即使我使用position:relative;，这也会使以下类固定。

HTML：

<!DOCTYPE HTML>
<html>
</html>
<body>
<link rel="stylesheet" href="../../css/style_four_sprint.css"/>


<script type="text/javascript">

    function selected_four_sprint(val){
    if (val == "next"){
        document.write(5 + 6)

        }

}
 </script>
<head>
<title>Hello Wolrd</title>
</head>

    <div class="top_container"> 
    <img id="loggo" src="../../images/logo_top_small.png"/>

    <div id="toolname">Love to all!</div>   

    <div class="select">
        <table>
            <tr>
                <td>What do you want?</td>
                <td>
                    <select id="four_sprint_select" onchange="selected_four_sprint(value);">
                        <option>Select</option>
                        <option value="next">Next</option>
                </td>
            </tr>
        <table>
    </div>
</div>
<div class="teams_container">
  <div id="no_team"> No team </div>
  <div id="bamse"> Bamse </div>
  <div id="skalman"> Skalman </div>
</div>

</body>

css：

body, html {
padding:0;
width:100%;
margin:0;
height:2000px;
z-index:1;
background:white;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;     
}

.top_container{
top:3px;
left:0px;
position:fixed;
height:43px;
width:100%;
border-bottom:1px solid #bcbaba;
z-index:15000;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

#toolname{
color:black;
float:left;
padding-right:20px;
position:relative;
margin-left:10px;
font-family:'Ericsson Capital TT';
z-index:2000;
font-size:15px;
margin-top:7px;
line-height:30px;
height:30px;
border-right:1px solid #DEDEDE;
/* border-bottom:1px solid #bcbaba;  */
}

#loggo{
margin-top:8px;
margin-left:8px;
float:left;
}

.select{
margin-left:10px;
float:left;
font-size:14px;
height:30px;
line-height:30px;
margin-top:5px;
border-right:1px solid #DEDEDE;
padding-right:10px;
}

.teams_container{
width:100%;
background-color:#55555;
padding-top:35px;   
position:relative;
right:200px;
font-size:25px;
}

Answer 1

您未正确关闭<table>代码。

结束标记必须为</table>。因为它没有关闭，所以html会混淆并认为<table>之后的所有内容都嵌套在<table>中。因此，因为<table>是.top_container的一部分，所以html的其余部分继续接收position: fixed

JS Fiddle

table部分应为：

<table>
    <tr>
        <td>What do you want?</td>
        <td>
            <select id="four_sprint_select" onchange="selected_four_sprint(value);">
                <option>Select</option>
                <option value="next">Next</option>
        </td>
    </tr>

<!--- This closing table tag needs "/", 
otherwise the document thinks its a new 
table being added.-->
</table>

固定顶部容器使一切都固定

1 个答案: