个人中心
gpt4 book ai didi

html - Fixed topcontainer 使一切固定

转载 作者：太空宇宙 更新时间：2023-11-03 23:11:09 24 4
gpt4 key购买 nike

我正在尝试制作一个带有固定位置顶部容器的网站，在 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;
}

最佳答案

您没有关闭您的 <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>

关于html - Fixed topcontainer 使一切固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32526289/

24 4 0
文章推荐： javascript - 如何在 jquery(或 javascript)中选择相邻元素
文章推荐： c# - 结合 IdentityServer4 和 MVC 客户端
文章推荐： c# - 在 Word 'Save As' 对话框中拦截保存事件
文章推荐： CSS/少 : apply attribute globally at once for specific tag (ex> tag)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com