Question

某种程度上我的导航标题元素不会浮动到右上角，其位置为：fixed。

有想法的人吗？

我真的很期待回答这个小小的谜团。

以下是代码：

<header class="hidden" style="z-index:40000; float:right;"> 
  <div class="wrapper hidden" id="test"> 
    <nav class="work-nav menu">
      <ul class="navscroll">
        <a href="#headerwrap" rel="tooltip" data-placement="left" title="Home">
          <li><img src="img/nav_bar_home_02.png"></li>
        </a>
        <a href="http://www.designlike.de/g_website_test/work-overview.htm" rel="tooltip" data-placement="left" class="transition" title="Work">
          <li><img src="img/nav_bar_work_02.png"></li>
        </a>
        <a href="#footerscroll" rel="tooltip" data-placement="left" title="Contact">
          <li><img src="img/nav_bar_contact_02.png"></li>
        </a>
      </ul>
    </nav>
  </div> 
</header>

和css：

/* ------ */
/* HEADER */
/* ------ */
header {
    display:block;
    position:fixed;
    top: 0;
    left: 0;
    width: 40px;
    overflow:visible;
    z-index:20000;
    float:right; !important
}
header .wrapper {
    position: fixed;
    padding-top: 0px;
    padding-bottom: 20px;
    height: 60px;
    float:right;
}
nav {  
    float:right;
    width:40px;
    margin-top:-1px; 
}
nav ul { margin:0px; padding:0px; position:fixed;}
nav ul li {
    width:40px;
    min-height: 40px;
    background-color:#ffd200;
    margin-top:1px;
    padding:0;
    list-style:none;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

nav ul li:hover {
    width:40px;
    min-height: 40px;
    background-color:#2a2a2a;
} 

nav a {
    color: #fff;
    cursor: pointer;
    display:block;
    text-decoration:none;
    width:100%;
}

nav a:hover{
    text-decoration:none;
}

nav li:hover {
    position: relative;
}

Answer 1

您无法将position: fixed;与float: right;一起使用。其中一个告诉它存在于特定的像素位置，而另一个告诉它在其容器中浮动。他们是相互冲突的指令，而position将会获胜。

尽管如此，我相信只需将left: 0更改为right: 0并完全删除float即可实现您的目标。

<header>元素不会向右浮动</header>

1 个答案: